/*

01. Ball content

02. wp Chat bot Message container

    -A Link Item
    -B Loading

03. wp Chat bot Message Editor

04. wp Chat bottom Tab Nav Editor

05. Tab Feature Product

06. Tab Cart

07. Product Details

*/

/*********************

01. Ball content wrapper

**********************/

.wp-chatbot-container {
    border-radius: 5px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.3);
    background: url('../../images/defult-bg.jpg') no-repeat bottom center;
    background-size: cover;
}

/******************************

02. wp Chat bot Message container

*********************************/

#wp-chatbot-ball-container.qcchatbot-template-newtarget .wp-chatbot-board-container,
#wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-board-container.active-chat-board {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.wp-chatbot-content {
    padding-left: 35px;

    padding-right: 35px;
}

ul.wp-chatbot-messages-container {
    padding: 0;

    margin: 0;

    overflow: visible;
}

ul.wp-chatbot-messages-container li {
    font-size: 14px;
}

ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after,
ul.wp-chatbot-messages-container > li .wp-chatbot-products:after {
    clear: both;

    display: block;

    content: '';

    height: 1px;
}

#wp-chatbot-messages-container .wp-chatbot-agent {
    display: none;
}

#wp-chatbot-messages-container .wp-chatbot-avatar img,
#wp-chatbot-messages-container .wp-chatbot-avatar.wp-chatbot-avatar--svg svg,
.wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
    width: 28px !important;
    height: 28px !important;
}

#wp-chatbot-messages-container .wp-chatbot-avatar.wp-chatbot-avatar--svg svg {
    display: block;
}

ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar,
.wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 28px;
    height: 28px;
    margin-top: 0;
    top: 50%;
}

ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
.wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
    left: 0;
}

ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
    right: -35px;
}

ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
.wp-chatbot-bubble {
    padding: 8px 15px;
    display: block;
    background-color: rgba(38, 176, 187, 0.75) !important;
    position: relative;
    box-sizing: border-box;
    border-radius: 2px;
    color: #fff;
    line-height: 150%;
}

ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph:before,
.wp-chatbot-bubble:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -7px;
}

ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph:before {
    right: -10px;
    border-top: 7px solid transparent;
    border-left: 10px solid rgba(38, 176, 187, 0.75);
    border-bottom: 7px solid transparent;
}

ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph:before,
.wp-chatbot-bubble:before {
    left: -10px;
    border-top: 7px solid transparent;
    border-right: 10px solid rgba(38, 176, 187, 0.75);
    border-bottom: 7px solid transparent;
}

ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
    text-align: right;
}

/************ 02.A Loading *******************/

ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
    background-color: #fff;
    padding: 1px;
    border-radius: 5px;
    margin: 0 auto;
    display: block;
}

/************02.B Link Item*************/

span.qcld-chatbot-product-category,
span.qcld-chatbot-support-items,
span.qcld-chatbot-wildcard,
span.qcld-chatbot-suggest-email,
span.qcld-chatbot-reset-btn,
#wp-chatbot-loadmore,
.wp-chatbot-loadmore {
    color: #000000;

    background-size: 200% auto;

    box-shadow: 0 5px 15px #c3c3c3;

    border: 1px solid #80808030;
}

span.qcld-chatbot-product-category:hover,
span.qcld-chatbot-support-items:hover,
span.qcld-chatbot-wildcard:hover,
span.qcld-chatbot-suggest-email:hover,
span.qcld-chatbot-reset-btn:hover,
#wp-chatbot-loadmore:hover,
.wp-chatbot-loadmore:hover {
    background-position: right center;

    box-shadow: none;
}

/*******************************

03. wp Chat bottom Tab Nav Editor

**********************************/

.wp-chatbot-footer {
    background-color: #26b0bb;
}

/*******************************

04. wp Chat bot Message Editor

**********************************/

.wp-chatbot-editor-container {
    border-bottom: 1px solid #1398a2;
}

.wp-chatbot-editor-container input {
    color: #ffffff;
}

.wp-chatbot-editor-container input::placeholder {
    color: #ffffff;
}

.wp-chatbot-editor-container input::-webkit-input-placeholder {
    color: #ffffff;
}

.wp-chatbot-editor-container input::-moz-placeholder {
    color: #ffffff;
}

.wp-chatbot-editor-container input:-ms-input-placeholder {
    color: #ffffff;
}

.wp-chatbot-editor-container input:-moz-placeholder {
    color: #ffffff;
}

/******************************************

05. Tab Feature Product

******************************************/

.wp-chatbot-agent-profile {
    position: relative;

    box-sizing: border-box;

    word-wrap: break-word;

    list-style: none;

    display: block;

    clear: both;

    line-height: 150%;

    min-height: 50px;

    margin: 0 0 10px 0;
}

.wp-chatbot-widget-title {
    color: #353535;

    text-align: center;

    padding-bottom: 10px;
}

/*********************************************

06. Tab Cart

*******************************************/

.wp-chatbot-cart-header {
    background-color: #f5f5f5;
}

.wp-chatbot-cart-single {
    background-color: rgba(245, 245, 245, 0.1);

    border-bottom: 1px solid #dddddd;
}

.wp-chatbot-cart-single:nth-child(2n + 1) {
    background-color: rgba(245, 245, 245, 0.5);
}

.wp-chatbot-cart-footer div a {
    text-decoration: none;

    background: #70aca9;

    color: #ffffff;
}

.wp-chatbot-cart-footer div a:hover,
.wp-chatbot-cart-footer div:last-child a {
    background: #5a8c89;
}

/******************************************

07. Product Details

*******************************************/

.wp-chatbot-product-details {
    box-shadow: 0 0 10px #ccc;

    background-color: rgba(255, 255, 255, 0.9);
}

.active-chatbot-product-details {
    margin-right: -5px;
}

.wp-chatbot-product-cart-button input[type='button'],
#wp-chatbot-loadmore,
.wp-chatbot-loadmore {
    border: 1px solid #26b0bb;

    background: #26b0bb;

    color: #ffffff;

    box-shadow: 0 0 2px #999;
}

.wp-chatbot-product-cart-button input[type='button']:hover,
#wp-chatbot-loadmore:hover,
.wp-chatbot-loadmore:hover {
    background: #229da7;

    color: #ffffff;
}

/*************************

Right-to-left text direction

**************************/

.wp-chatbot-rtl {
    text-align: right;

    direction: RTL;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
    padding: 0;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
    text-align: right;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph:before,
.wp-chatbot-rtl .wp-chatbot-bubble:before {
    right: -10px;
    left: auto;
    border-top: 7px solid transparent;
    border-left: 10px solid rgba(38, 176, 187, 0.75);
    border-right: none;
    border-bottom: 7px solid transparent;
}

.wp-chatbot-rtl
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    > .wp-chatbot-paragraph:before {
    left: -10px;
    right: auto;
    border-top: 7px solid transparent;
    border-right: 10px solid rgba(38, 176, 187, 0.75);
    border-left: none;
    border-bottom: 7px solid transparent;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
    right: -30px;
    left: auto;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
    left: -30px;
    right: auto;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
    text-align: left;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
    margin-left: 0;
}

.wp-chatbot-rtl .wp-chatbot-editor-container input {
    text-align: right;
    direction: RTL;
}

.wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n + 2) {
    margin: auto;
}

.wp-chatbot-rtl .wp-chatbot-products-area ul li {
    margin: 1%;

    vertical-align: middle;
}

.wpb-search-result a {
    display: block;
    background: #eee;
    padding: 4px 5px;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 5px;
}
.wpb-search-result a:before {
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    position: absolute;
    left: 21px;
    line-height: 1;
    font-weight: bold;
    color: #7d7b7b;
}

.wpbot-saas-live-chat {
    width: 310px;
    height: 500px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16) !important;
    display: none;
}
.wpchat_header_left {
    display: inline-block;
}
.wpchat_header_left span {
    font-size: 22px;
    padding: 0px 10px;
}
.wpchat_header_right {
    float: right;
    margin-right: 12px;
}
.wp-chatbot-tab-nav ul li a[data-option='live-chat'] {
    background-position: -169px -8px;
}

.wp-chatbot-start-header {
    background: linear-gradient(135deg, #88c4c8 0%, #1398a2 100%);
}
.wp-chatbot-start-content-single {
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 15px 0px,
        rgba(0, 0, 0, 0.1) 0px 1px 2px 0px,
        rgb(116 182 167 / 50%) 0px 2px 0px 0px inset !important;
}
.qc-new-conversation-button {
    color: rgb(103 183 177) !important;
    border: 1px solid rgb(103 183 177) !important;
}
.qcld-new-conv-button path {
    fill: rgb(103 183 177);
}
.qc-new-conversation-button:hover {
    background: #fff !important;
}

.qcwp-chatbot-search-article-submit {
    background-color: rgb(103 183 177) !important;
}
.qcld_back_to_start_menu {
    position: absolute;
    left: 2px;
    line-height: 32px;
    margin-left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
#wp-chatbot-email-transcript {
    color: #fff;
}
.qcld_back_to_start_menu {
    color: #fff;
}
.wp-chatbot-start-header .wp-chatbot-start-close {
    background-color: #1398a2 !important;
}
#wp-chatbot-email-transcript {
    right: 65px !important;
}

/* Horizontal Scroll Effect CSS */

/* Horizontal Scroll Effect CSS */

.qcld-horizontal-scroll .qcld-bottom-menu-wrapper {
    max-width: 500px;
    padding: 0 20px;
    margin: 15px auto 0 auto;
    position: relative;
    overflow: hidden;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item {
    height: 100%;
    overflow: auto;
    white-space: nowrap;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item span {
    display: inline-block;
    padding: 3px 15px;
    color: #333;
    font-size: 13px;
    margin-right: 0 !important;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item span:hover {
    text-decoration: none;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item span:first-child {
    padding-left: 5px;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item::-webkit-scrollbar {
    display: none;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .pointer {
    height: 40px;
    width: 30px;
    line-height: 38px;
    text-align: center;
    position: absolute;
    top: 0;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .pointer i {
    color: #333;
    cursor: pointer;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .left-pointer {
    left: -10px;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .right-pointer {
    right: -10px;
}
.qcld-horizontal-scroll a.active {
    color: red;
}
.qcld-horizontal-scroll .qcld-bottom-menu-wrapper .qcld-bottom-menu-item span:hover {
    color: #fff !important;
}
.qcld-horizontal-scroll {
    padding: 6px 12px;
}

@media screen and (max-width: 767px) {
    .wpbot-saas-live-chat {
        width: 100% !important;
    }
}

.qcchatbot-template-02 .wpbot_card_caption {
    box-shadow: none !important;
    color: #ffffff !important;
    background-color: #ffffff00 !important;
    transform: none !important;
}
.qcchatbot-template-02 .wpb-search-result > p {
    padding: 8px 15px;
    max-width: 90%;
    box-shadow: 0 2px 3px #2e2e2e;
}

.qcchatbot-template-02 .wpbot_card_image img {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    display: inline-block;
    margin: 12px 0 0 12px;
}
.qcchatbot-template-02 .wpbot_card_wraper {
    box-shadow:
        inset 1px 1px 0 rgb(255 255 255 / 75%),
        inset 0 0 5px rgb(255 255 255 / 76%);
    background: rgb(255 255 255 / 30%);
    backdrop-filter: blur(0px);
    isolation: isolate;
    border-radius: 6px;
    width: 100%;
}
.qcchatbot-template-02 .wpb-search-result a {
    background: #eeeeee00;
}

.qcchatbot-template-02
    .qcchatbot-template-02
    .wpbot_card_wraper
    .wpbot_card_caption.wpbot_card_caption_saas {
    box-shadow: none !important;
    background: none !important;
    backdrop-filter: none !important;
}
.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_caption p {
    font-size: 14px;
    color: rgb(255 255 255) !important;
    padding: 0 8px;
}

.qcchatbot-template-02 .wpbot_card_caption {
    margin-top: 0 !important;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_caption {
    width: 100%;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_caption {
    position: relative;
}

.qcchatbot-template-02 .wpb-search-result .wpbot_card_wraper a {
    padding: 0 !important;
    line-height: normal !important;
    padding-left: 0 !important;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_caption {
    margin: 0 !important;
    padding: 8px 6px 8px 6px !important;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_image {
    height: auto !important;
    overflow: unset !important;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_image a {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.qcchatbot-template-02 .wp-chatbot-header {
    height: 50px !important;
}
.qcchatbot-template-02 .wp-chatbot-container {
    border-radius: 6px;
}

.qcchatbot-template-02 .wpbot_card_image.wpbot_card_image_saas span {
    display: block !important;
}

.qcchatbot-template-02 .wpbot_card_image span {
    display: none !important;
}

.qcchatbot-template-02 .wpbot_card_wraper .wpbot_card_caption p.wpbot_card_caption_title {
    font-size: 14px;
    color: rgb(29 115 180) !important;
    padding: 0 8px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.qcchatbot-template-02 .wpbot_card_caption h2 {
    color: #ffffff;
    padding-left: 8px;
}

.qcchatbot-template-02 #wp-chatbot-desktop-reload {
    top: 15px !important;
}

.qcchatbot-template-02 .wpb-search-result a {
    background: rgb(38 176 187) !important;
    border-radius: 4px;
}
.qcchatbot-template-02 .wpbot_card_caption {
    background-color: rgba(38, 176, 187, 0.75) !important;
}

.qcchatbot-template-02 .wpb-search-result > p {
    background: rgba(38, 176, 187, 0.75) !important;
    border-radius: 4px;
    box-shadow: none;
}

/* slimScroll (jquery.slimscroll): hide bar/rail — theme loads this file without common-style.css */
#wp-chatbot-chat-container .slimScrollBar,
#wp-chatbot-chat-container .slimScrollRail,
#wp-chatbot-shortcode-template-container .slimScrollBar,
#wp-chatbot-shortcode-template-container .slimScrollRail {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===========================
   New Target Conversational AI
   Scoped, modern dark layout
   =========================== */
.qcchatbot-template-newtarget {
    --nt-bg: #090e22;
    --nt-bg2: #0c1432;
    --nt-surface: #111735;
    --nt-surface-2: #1b203f;
    --nt-border: #20d8f6;
    --nt-text: #d6e6ff;
    --nt-text-muted: #8aa3cf;
    --nt-gradient: linear-gradient(90deg, #22e1ff 0%, #2dd8d2 100%);
}

.qcchatbot-template-newtarget#wp-chatbot-ball-container {
    width: min(920px, 96%);
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 0 10px;
}

/* [wpbot-page]: space between composer and bottom of viewport */
body.wpbot-page-embed .qcchatbot-template-newtarget#wp-chatbot-ball-container {
    /* Air below composer + room while streaming (scroll-margin pairs with this) */
    padding-bottom: 140px;
    box-sizing: border-box;
}

.qcchatbot-template-newtarget .wp-chatbot-container {
    background: #ffffff;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

.qcchatbot-template-newtarget .newtarget-board {
    min-height: 250px;
    padding: 12px 16px 10px;
    position: relative;
}

.qcchatbot-template-newtarget .newtarget-chat-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 8px;
}

/*
 * Toolbar button styling is keyed off the class .newtarget-reset-btn so it works for either
 * the reset button (id="wp-chatbot-desktop-reload", inline embed) or the minimize button
 * (id="wp-chatbot-desktop-close", floating sidebar). qcld-wp-chatbot-front.js binds the close
 * behavior to #wp-chatbot-desktop-close directly, no extra JS required.
 */
.qcchatbot-template-newtarget .newtarget-reset-btn {
    position: relative;
    right: 14px;
    top: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(46, 215, 255, 0.55);
    background: rgba(17, 24, 50, 0.85);
    color: #c8dcff;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
    z-index: 2;
}

.qcchatbot-template-newtarget .newtarget-reset-btn:hover,
.qcchatbot-template-newtarget .newtarget-reset-btn:focus-visible {
    background: rgba(46, 215, 255, 0.12);
    border-color: rgba(46, 215, 255, 0.9);
    color: #ffffff;
}

.qcchatbot-template-newtarget .newtarget-reset-btn i {
    font-size: 15px;
    line-height: 1;
}

/*
 * The template.php toolbar renders both #wp-chatbot-desktop-reload (.newtarget-shortcode-only) and
 * #wp-chatbot-desktop-close (.newtarget-floating-only). Each is keyed to a different surrounding
 * wrapper (set by qcld_wp_chatbot_page_short_code() for the inline embed and by
 * qcld_wp_chatbot_load_footer_html() for the floating widget) so only the right one is visible.
 *
 *   - #wp-chatbot-shortcode-template-container → inline full-page embed → show reset, hide minimize.
 *   - #wp-chatbot-chat-container               → floating sidebar widget → show minimize, hide reset.
 */
.newtarget-floating-only {
    display: none !important;
}

.newtarget-shortcode-only {
    display: inline-flex !important;
}

#wp-chatbot-chat-container .newtarget-floating-only {
    display: inline-flex !important;
}

#wp-chatbot-chat-container .newtarget-shortcode-only {
    display: none !important;
}

.qcchatbot-template-newtarget .newtarget-content {
    padding: 0;
    height: fit-content;
}

/*
 * common-style.css sets .wp-chatbot-content { height: 400px } and
 * .wp-chatbot-shortcode-template-container .wp-chatbot-content { height: 452px } when that file loads.
 * slimScroll also wraps .wp-chatbot-ball-inner and traps wheel events. Here we force natural height so
 * the document (and browser scrollbar) can scroll the full chat.
 */
#wp-chatbot-shortcode-template-container .wp-chatbot-ball-inner.wp-chatbot-content,
#wp-chatbot-shortcode-template-container .wp-chatbot-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow: visible !important;
}

.qcchatbot-template-newtarget .wp-chatbot-ball-inner.wp-chatbot-content,
.qcchatbot-template-newtarget .wp-chatbot-content.newtarget-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Desktop: messages flow with page scroll; mobile: fixed-height pane */
@media (min-width: 769px) {
    .qcchatbot-template-newtarget .wp-chatbot-messages-wrapper {
        min-height: 130px;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .qcchatbot-template-newtarget .wp-chatbot-messages-wrapper {
        min-height: 130px;
        max-height: 210px;
        overflow-y: auto;
        padding-right: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .qcchatbot-template-newtarget .wp-chatbot-messages-wrapper::-webkit-scrollbar {
        width: 8px;
    }

    .qcchatbot-template-newtarget .wp-chatbot-messages-wrapper::-webkit-scrollbar-thumb {
        background: rgba(56, 197, 255, 0.35);
        border-radius: 10px;
    }
}

.qcchatbot-template-newtarget ul#wp-chatbot-messages-container {
    padding-bottom: 20px;
}

.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li {
    margin: 10px 0;
    line-height: 1.45;
    color: var(--nt-text);
}

/* User bubble glow must not paint over the next bot message */
.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    margin-bottom: 28px;
}

.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
    position: relative;
    z-index: 2;
}

/* Softer alignment when JS calls scrollIntoView (avoids hard snap against the composer) */
.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li.wp-chatbot-msg,
.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
    scroll-margin: 12px 0 130px;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    .wp-chatbot-paragraph {
    max-width: 75%;
    background: #ffffff !important;
    color: #0b1230 !important;
    border-radius: 12px;
    border: 0;
    font-weight: 600;
    box-shadow: none;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    > .wp-chatbot-paragraph:before {
    display: none;
}

/* First FAQ flat row: hide agent SVG avatar (intro + chips). */
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat:first-child
    > .wp-chatbot-avatar.wp-chatbot-avatar--svg,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat:has(
        .qcld-support-faq-intro,
        .qcld-str-faq-intro,
        .qcld-support-faq-cards
    )
    > .wp-chatbot-avatar.wp-chatbot-avatar--svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* FAQ STR: intro from Language Center (How can Dottie help?) above chip list */
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg
    .qcld-str-faq-intro {
    display: block;
    margin: 0 0 12px 0;
    max-width: 78%;
    color: var(--nt-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* Support intent: welcome line + FAQ cards (matches conversational-ai layout) */
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat
    .qcld-support-faq-intro {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px 0;
    padding: 0 6px;
    text-align: center;
    color: var(--nt-text-muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    box-sizing: border-box;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat
    .qcld-support-faq-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat
    .qcld-support-faq-cards
    .qcld-chatbot-support-items {
    display: block;
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background: rgba(38, 44, 62, 0.98) !important;
    color: #f4f7ff !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid rgba(86, 137, 255, 0.22) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg-flat
    .qcld-support-faq-cards
    .qcld-chatbot-support-items:hover {
    background: rgba(52, 62, 88, 0.98) !important;
    border-color: rgba(46, 215, 255, 0.45) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42) !important;
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .qcchatbot-template-newtarget
        ul.wp-chatbot-messages-container
        > li.wp-chatbot-msg-flat
        .qcld-support-faq-cards
        .qcld-chatbot-support-items {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg
    .wp-chatbot-paragraph,
.qcchatbot-template-newtarget .wp-chatbot-bubble {
    max-width: 85%;
    background: #ffffff !important;
    color: #0b1230 !important;
    border-radius: 12px;
    border: 0;
    box-shadow: none;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg
    > .wp-chatbot-paragraph:before,
.qcchatbot-template-newtarget .wp-chatbot-bubble:before {
    border-right-color: rgba(14, 21, 46, 0.94);
}

/*
 * Agentforce / Dreamforce row: avatar + message side-by-side inside wp-chatbot-msg.
 * FAQ flat rows (intro + chips) stay full-width; avatar hidden there via rules above.
 */
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 16px;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-avatar,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-avatar.wp-chatbot-avatar--svg {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 3px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .chat-container,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-paragraph {
    flex: 1 1 0;
    min-width: 0;
    max-width: 85% !important;
    margin-top: 0 !important;
    padding-top: 0;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    .chat-container
    > .wp-chatbot-paragraph {
    max-width: 100% !important;
    margin-top: 0 !important;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-paragraph.comment-loading,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    .chat-container
    > .wp-chatbot-paragraph.comment-loading {
    flex: 0 1 auto;
    min-width: min-content;
    overflow: visible;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-paragraph:before,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    .chat-container
    > .wp-chatbot-paragraph:before {
    display: none !important;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-products-area,
.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wpb-search-result {
    flex: 1 1 100%;
    margin-left: 44px;
    max-width: calc(100% - 44px);
    box-sizing: border-box;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .chat-container
    .qcld-like-dislike-icon {
    margin-top: 8px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-messages-container
    .wp-chatbot-avatar.wp-chatbot-avatar--svg
    svg {
    width: 32px !important;
    height: 32px !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-messages-container
    .wp-chat-user-msg
    .wp-chatbot-avatar.wp-chatbot-avatar--client
    svg {
    width: 32px !important;
    height: 32px !important;
    display: block;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-messages-container
    .wp-chat-user-msg
    .wp-chatbot-avatar.wp-chatbot-avatar--client
    svg
    .nt-person-avatar-bg {
    fill: color-mix(in srgb, var(--dynamic-gradient-color-1) 20%, #ffffff);
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat) {
    flex-direction: row-reverse;
}

.wp-chatbot-rtl
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-avatar,
.wp-chatbot-rtl
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-avatar.wp-chatbot-avatar--svg {
    right: auto;
    left: auto;
}

.wp-chatbot-rtl
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wp-chatbot-products-area,
.wp-chatbot-rtl
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg:not(.wp-chatbot-msg-flat)
    > .wpb-search-result {
    margin-left: 0;
    margin-right: 44px;
}

/*
 * User messages: avatar + bubble side-by-side (right-aligned as a group).
 */
.qcchatbot-template-newtarget ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    > .wp-chatbot-avatar {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 3px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    > .wp-chatbot-avatar
    img {
    width: 32px !important;
    height: 32px !important;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

.qcchatbot-template-newtarget
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    > .wp-chatbot-paragraph {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0 !important;
    margin-top: 0 !important;
    float: none !important;
    text-align: left;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
    justify-content: flex-start;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-avatar {
    right: auto;
    left: auto;
}

.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
    text-align: right;
}

/* Typing state: assets/ai-results-message.html (replaces "Tofie is typing...") */
.qcchatbot-template-newtarget .wp-chatbot-comment-loader--nt .aiconversation-results-message {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
    min-width: min-content;
    padding: 2px 0;
    margin: 4px 0 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.qcchatbot-template-newtarget .wp-chatbot-paragraph.comment-loading,
.qcchatbot-template-newtarget .wp-chatbot-comment-loader--nt {
    overflow: visible;
    min-width: min-content;
}

.qcchatbot-template-newtarget .wp-chatbot-comment-loader--nt .message-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qcchatbot-template-newtarget .wp-chatbot-comment-loader--nt .message-icon svg {
    width: 18px;
    height: auto;
    display: block;
}

.qcchatbot-template-newtarget .wp-chatbot-comment-loader--nt .message-text {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--nt-text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: visible;
}

@keyframes nt-chatbot-stars-pulse {
    0%,
    100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.qcchatbot-template-newtarget
    .wp-chatbot-comment-loader--nt
    .aiconversation-results-message.stars-shine
    .message-icon
    svg {
    animation: nt-chatbot-stars-pulse 1.35s ease-in-out infinite;
}

.qcchatbot-template-newtarget .wp-chatbot-tab-nav,
.qcchatbot-template-newtarget .qcld-bot-powered-by,
.qcchatbot-template-newtarget .wp-chatbot-header,
.qcchatbot-template-newtarget .qcld-horizontal-scroll {
    display: none !important;
}

.qcchatbot-template-newtarget .wpbot-saas-live-chat {
    display: none !important;
}

.qcchatbot-template-newtarget .newtarget-footer {
    background: transparent;
    padding: 8px 0 2px;
}

.qcchatbot-template-newtarget .newtarget-editor {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 999px;
    background: rgba(17, 24, 50, 0.92);
    padding: 8px 10px;
}

.qcchatbot-template-newtarget .newtarget-editor label {
    display: none;
}

.qcchatbot-template-newtarget .newtarget-editor input.wp-chatbot-editor {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    color: #d8e8ff !important;
    font-size: 16px;
    padding: 0 10px;
    min-height: 28px;
    box-shadow: none !important;
}

.qcchatbot-template-newtarget .newtarget-editor input.wp-chatbot-editor::placeholder {
    color: var(--nt-text-muted) !important;
}

.qcchatbot-template-newtarget .newtarget-editor input.wp-chatbot-editor:focus {
    outline: none !important;
}

.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
    position: relative;
    color: var(--dynamic-gradient-color-1, #48a3ff);
}

.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message svg,
.qcchatbot-template-newtarget
    .newtarget-editor
    #wp-chatbot-send-message
    .nt-dottie-send-sparkles__svg {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.qcchatbot-template-newtarget
    .newtarget-editor
    #wp-chatbot-send-message
    [data-name='center-right-star'],
.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message [data-name='top-star'],
.qcchatbot-template-newtarget
    .newtarget-editor
    #wp-chatbot-send-message
    [data-name='bottom-left-star'] {
    fill: currentColor;
}

.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message:hover,
.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message:focus-visible {
    color: var(--dynamic-gradient-color-2, #13e8cf);
    opacity: 1;
    background: none;
}

.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message svg,
.qcchatbot-template-newtarget
    .newtarget-editor
    #wp-chatbot-send-message
    [data-name='center-right-star'],
.qcchatbot-template-newtarget .newtarget-editor #wp-chatbot-send-message [data-name='top-star'],
.qcchatbot-template-newtarget
    .newtarget-editor
    #wp-chatbot-send-message
    [data-name='bottom-left-star'] {
    opacity: 1;
}

@media (max-width: 768px) {
    .qcchatbot-template-newtarget#wp-chatbot-ball-container {
        width: 100%;
        padding: 8px 0;
    }

    .qcchatbot-template-newtarget .newtarget-board {
        padding: 10px 8px 8px;
    }

    .qcchatbot-template-newtarget
        ul.wp-chatbot-messages-container
        > li.wp-chat-user-msg
        .wp-chatbot-paragraph,
    .qcchatbot-template-newtarget
        ul.wp-chatbot-messages-container
        > li.wp-chatbot-msg
        .wp-chatbot-paragraph,
    .qcchatbot-template-newtarget .wp-chatbot-bubble {
        max-width: 100%;
    }
}

.wp-chatbot-content {
    max-height: none !important;
}

/* =========================================================================
   template-newtarget-floating
   -------------------------------------------------------------------------
   This file is template-newtarget/style.css + the floating-mode block below.

   Everything above this block was copied verbatim from
   templates/template-newtarget/style.css and styles the [wpbot-page] inline
   embed (full-page Dottie). It is left untouched so the inline render stays
   pixel-identical to the original theme.

   The rules below add the floating bubble + chat panel layout. They are
   scoped under the floating wrapper #wp-chatbot-chat-container, which is the
   outer container that qcld_wp_chatbot_load_footer_html() in functions.php
   adds around every footer-rendered bot. The inline embed sits under
   #wp-chatbot-shortcode-template-container instead, so it never matches
   these selectors.

   The selectors below carry 2 IDs + 2 classes of specificity, which is
   higher than the 1-ID + 1-class inline-embed rules above (for example
   .qcchatbot-template-newtarget#wp-chatbot-ball-container). That lets the
   floating rules override the embed defaults (width: min(920px,96%);
   margin: 0 auto; etc.) without using !important.

   This template intentionally bypasses common-style.css (see
   Qcld_WPBot_Frontend_resources::qcld_wb_chatbot_frontend_scripts in
   includes/class-frontend-resources.php), so the floating layout - fixed
   wrapper, ball button, .active-chat-board panel toggle, mobile drawer -
   is declared here from scratch.

   Where the widget shows up on the site is gated upstream by
   qcld_wp_chatbot_load_controlling() in functions.php, which reads the
   admin "Page Control Bot Loading Options" (disable_wp_chatbot,
   disable_wp_chatbot_on_mobile, wp_chatbot_show_home_page,
   wp_chatbot_show_posts, wp_chatbot_show_pages, wp_chatbot_show_pages_list).
   ========================================================================= */

/* Outer floating wrapper pinned bottom-right of the viewport. */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10050;
    width: auto;
    overflow: visible;
    /* Let page content receive clicks outside the pill / sidebar panels */
    pointer-events: none;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-launcher,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
    pointer-events: auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating #wp-chatbot-integration-container,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget {
    overflow: visible;
}

/*
 * Reset the inline-embed defaults for the inner ball-container so floating
 * mode hugs its bubble. Targets the .qcchatbot-template-newtarget class
 * still emitted by templates/template-newtarget-floating/template.php (the
 * inner wrapper class is shared with the inline embed by design).
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Floating bubble button. */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating #wp-chatbot-ball {
    position: relative;
    display: block;
    margin: 12px 0 0 auto;
    width: 64px;
    height: 64px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating #wp-chatbot-ball .wp-chatbot-ball {
    position: relative;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 0 !important;
    margin: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, #22e1ff 0%, #2dd8d2 100%) !important;
    box-shadow:
        0 10px 30px rgba(34, 225, 255, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.35);
    outline: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball
    .wp-chatbot-ball:hover,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball
    .wp-chatbot-ball:focus {
    transform: translateY(-2px);
    box-shadow:
        0 14px 36px rgba(34, 225, 255, 0.55),
        0 3px 8px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #22e1ff 0%, #2dd8d2 100%) !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball
    .wp-chatbot-ball
    img {
    width: 38px !important;
    height: 38px !important;
    padding: 0;
    border-radius: 0;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/*
 * Hide the ball while the chat panel is open. The plugin JS
 * (js/qcld-wp-chatbot-front.js) adds .wpbot_chatopen_iconanimation to
 * #wp-chatbot-ball on open and removes it on close.
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball.wpbot_chatopen_iconanimation {
    display: none;
}

/*
 * Sidebar panel inspired by the Salesforce/Agentforce widget at
 * https://www.salesforce.com/dreamforce/. Instead of a small popover above
 * the bubble, the open panel pins itself to the right edge of the viewport
 * and fills the full height.
 *
 * The panel is hidden by default and shown when the plugin JS toggles
 * .active-chat-board on #wp-chatbot-board-container
 * (see js/qcld-wp-chatbot-front.js, click handler on the ball).
 *
 * Pinning to the viewport (position: fixed) instead of the bubble wrapper
 * means the bubble's bottom/right offsets do not push the sidebar inward.
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
    --nt-dottie-sidebar-duration: 0.48s;
    --nt-dottie-sidebar-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow:
        -16px 0 40px rgba(0, 0, 0, 0.45),
        -2px 0 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(46, 215, 255, 0.25);
    box-sizing: border-box;
    z-index: 10051;
    /* Off-screen to the right; slides in when chat board is active */
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
        transform var(--nt-dottie-sidebar-duration) var(--nt-dottie-sidebar-easing),
        visibility 0s linear var(--nt-dottie-sidebar-duration),
        box-shadow var(--nt-dottie-sidebar-duration) ease;
    will-change: transform;
}

/*
 * The shared inline-embed rule near the top of this file is:
 *   #wp-chatbot-ball-container.qcchatbot-template-newtarget .wp-chatbot-board-container,
 *   #wp-chatbot-ball-container.qcchatbot-template-newtarget .wp-chatbot-board-container.active-chat-board {
 *       display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important;
 *   }
 * Its selectors carry 1 ID + 4 classes for the active variant. The selectors below carry
 * 2 IDs + 4 classes (chat-container ID + ball-container ID + the same class chain), giving
 * them higher specificity so the floating sidebar gets its flex column layout instead.
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-board-container {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative;
    box-sizing: border-box;
    flex-direction: column;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-container:has(.wp-chatbot-board-container.active-chat-board),
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
    .wp-chatbot-container {
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition:
        transform var(--nt-dottie-sidebar-duration) var(--nt-dottie-sidebar-easing),
        visibility 0s linear 0s,
        box-shadow var(--nt-dottie-sidebar-duration) ease;
}

/* Step 3 → 2: slide sidebar back off-screen (same duration/easing as open + body push) */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar
    .wp-chatbot-container {
    display: flex !important;
    transform: translate3d(100%, 0, 0) !important;
    visibility: visible;
    pointer-events: none;
    transition:
        transform var(--nt-dottie-sidebar-duration) var(--nt-dottie-sidebar-easing),
        visibility 0s linear var(--nt-dottie-sidebar-duration),
        box-shadow var(--nt-dottie-sidebar-duration) ease;
}

/* Keep chat UI visible while the panel slides out (active-chat-board drops at end of close). */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar
    #wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-board-container {
    display: flex !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
    .wp-chatbot-ball-inner.wp-chatbot-content {
    animation: nt-dottie-sidebar-content-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

@keyframes nt-dottie-sidebar-content-in {
    from {
        opacity: 0;
        transform: translate3d(16px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-board-container.active-chat-board {
    display: flex !important;
}

/*
 * Inside the sidebar, the board becomes a vertical flex column so the message
 * list grows and the footer stays pinned to the bottom. The inline embed never
 * matches these selectors, so its document-scroll layout is untouched.
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-board {
    padding: 14px;
    min-height: 0;
    flex: 1 1 auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-chat-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0 14px 14px;
    border-bottom: 1px solid #e5e5e5;
    margin-left: -14px;
    margin-right: -14px;
    overflow: visible;
    position: relative;
    z-index: 3;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-chat-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .newtarget-chat-toolbar
    .newtarget-reset-btn {
    position: static;
    right: auto;
    top: auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-sidebar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    position: relative;
    overflow: visible;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-sidebar-brand__avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 0;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__avatar-svg {
    display: block;
    width: 32px;
    height: 32px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-sidebar-brand__title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-top: 1.5px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__title
    > span {
    font-family: 'Proxima Nova', 'proxima-nova', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    display: inline-block;
    background: linear-gradient(
        45deg,
        var(--dynamic-gradient-color-1, #48a3ff) 0%,
        var(--dynamic-gradient-color-2, #13e8cf) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-sidebar-brand__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info:hover,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info:focus-visible {
    outline: none;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info-icon {
    display: block;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-sidebar-brand__tooltip {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 260px;
    max-width: min(280px, calc(var(--nt-dottie-sidebar-width, 400px) - 28px));
    padding: 8px 10px;
    border-radius: 8px;
    background: #14141d;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow:
        rgba(24, 24, 24, 0.08) 0px 2px 8px -2px,
        rgba(24, 24, 24, 0.16) 0px 8px 12px -2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 0.28s ease-out,
        transform 0.28s ease-out,
        visibility 0s linear 0.28s;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__tooltip::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__tooltip
    p {
    margin: 0;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__tooltip
    a {
    color: var(--dynamic-gradient-color-1, #48a3ff);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__tooltip
    a:hover,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__tooltip
    a:focus {
    color: var(--dynamic-gradient-color-1, #48a3ff);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info-wrap:hover
    .nt-dottie-sidebar-brand__tooltip,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-sidebar-brand__info-wrap:focus-within
    .nt-dottie-sidebar-brand__tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.28s ease-out,
        transform 0.28s ease-out,
        visibility 0s linear 0s;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-ball-inner.wp-chatbot-content,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-content.newtarget-content {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Override inline-embed fit-content so the sidebar message pane can grow */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-content {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 0;
    min-height: 0;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-messages-wrapper {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: scroll inside the sidebar, not the page behind it */
@media (min-width: 769px) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-messages-wrapper {
        min-height: 120px;
        overflow-y: auto;
    }
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-footer.newtarget-footer {
    flex: 0 0 auto;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-messages-wrapper::-webkit-scrollbar {
    width: 8px;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-messages-wrapper::-webkit-scrollbar-thumb {
    background: rgba(56, 197, 255, 0.35);
    border-radius: 10px;
}

/*
 * On narrow viewports the sidebar takes the full width so it behaves like a
 * fullscreen drawer. The bubble itself stays anchored at bottom-right with a
 * slightly tighter offset.
 */
@media (max-width: 600px) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
        width: 100vw;
        max-width: 100vw;
        border-left: 0;
    }
}

/* =========================================================================
   Dottie floating launcher + light sidebar (Agentforce-style)
   ========================================================================= */

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
    --nt-site-header-height: 76px;
    --nt-launcher-blue: #0176d3;
    --nt-launcher-blue-dark: #032d60;
    --nt-launcher-surface: #ffffff;
    --nt-launcher-border: rgba(1, 118, 211, 0.35);
    --nt-launcher-gradient: linear-gradient(145deg, #0b5cab 0%, #0176d3 55%, #1b96ff 100%);
}

/* Light theme inside the floating sidebar (overrides dark --nt-* above). */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .qcchatbot-template-newtarget {
    --nt-bg: #ffffff;
    --nt-bg2: #f4f6f9;
    --nt-surface: #ffffff;
    --nt-surface-2: #f3f6fb;
    --nt-border: #0176d3;
    --nt-text: #181818;
    --nt-text-muted: #5c5c5c;
    --nt-gradient: linear-gradient(90deg, #0176d3 0%, #1b96ff 100%);
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating #wp-chatbot-ball {
    display: none !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-launcher {
    position: relative;
    z-index: 100001;
    margin: 0 0 0 auto;
    width: min(380px, calc(100vw - 40px));
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: visible;
}

/* Hide launcher while sidebar is open (fade, not display:none — enables pill exit animation) */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-sidebar
    .nt-dottie-launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.92);
    transition:
        opacity 0.28s ease,
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.28s;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-sidebar.nt-dottie-is-opening-sidebar
    .nt-dottie-launcher,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar
    .nt-dottie-launcher {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: scale(1);
    transition-delay: 0s;
}

/* Pill enter on load */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-launcher.nt-dottie-is-entering
    .nt-dottie-ask-pill {
    animation: nt-dottie-pill-return 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Pill → sidebar: pill exits before sidebar arrives */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-launcher.nt-dottie-is-opening-sidebar
    .nt-dottie-ask-pill {
    opacity: 0;
    transform: scale(0.86);
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 1, 1),
        transform 0.28s cubic-bezier(0.4, 0, 1, 1);
    transition-delay: 0s;
}

/* Sidebar → pill: pill returns after sidebar leaves */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .nt-dottie-launcher.nt-dottie-pill-returning
    .nt-dottie-ask-pill {
    animation: nt-dottie-pill-return 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nt-dottie-pill-return {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Circle launcher (default / step 2); SVG .st* styles scoped to pill only ---- */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color {
    background: var(--dynamic-gradient-color-1);
    background: linear-gradient(
        45deg,
        var(--dynamic-gradient-color-1) 0%,
        var(--dynamic-gradient-color-2) 100%
    );
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0px 9px rgba(3, 45, 96, 0.35);
    cursor: pointer;
    color: #fff;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    line-height: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:hover,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:focus {
    background: var(--dynamic-gradient-color-2);
    background: linear-gradient(
        45deg,
        var(--dynamic-gradient-color-2) 0%,
        var(--dynamic-gradient-color-1) 100%
    );
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-isotype {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text
    .nt-dottie-t-st0,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-isotype
    .nt-dottie-i-st0 {
    fill: none;
    mask: none;
    -webkit-mask: none;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text {
    z-index: 1;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text
    .nt-dottie-t-st1,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text
    .nt-dottie-t-st2 {
    fill: #fff;
    fill-opacity: 1;
    opacity: 1;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-text
    .nt-dottie-t-st1 {
    fill-rule: evenodd;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-isotype {
    z-index: 2;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-isotype
    > .nt-dottie-i-st2 {
    clip-path: url(#nt-dottie-circle-clippath-nt-dottie-circle-isotype);
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
    #nt-dottie-circle-isotype
    .nt-dottie-i-st1 {
    fill: #fff;
    fill-opacity: 1;
    opacity: 1;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:hover
    #nt-dottie-circle-text,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:focus
    #nt-dottie-circle-text {
    transform: rotate(45deg);
}

@media (min-width: 1025px) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color {
        width: 100px;
        height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-ask-pill,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-launcher {
        transition: none !important;
        animation: none !important;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        .nt-dottie-launcher.nt-dottie-is-entering
        .nt-dottie-ask-pill {
        animation: none !important;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color
        #nt-dottie-circle-text,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:hover
        #nt-dottie-circle-text,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        button#nt-dottie-ask-pill.nt-dottie-ask-pill.wheel.nt-dynamic-color:focus
        #nt-dottie-circle-text {
        transform: none !important;
        transition: none !important;
    }
}

/* ---- Sidebar panel (below site header, slides from right) ---- */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
    top: var(--nt-site-header-height, 76px);
    height: calc(100vh - var(--nt-site-header-height, 76px));
    max-height: calc(100vh - var(--nt-site-header-height, 76px));
    background: var(--nt-launcher-surface);
    box-shadow: -8px 0 32px rgba(3, 45, 96, 0.18);
    border-left: 1px solid rgba(3, 45, 96, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
        transition: none !important;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
        .wp-chatbot-ball-inner.wp-chatbot-content {
        animation: none !important;
    }
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    #wp-chatbot-ball-container.qcchatbot-template-newtarget
    .wp-chatbot-container {
    background:
        radial-gradient(circle at 22% 8%, rgba(27, 150, 255, 0.06), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-reset-btn {
    border-color: rgba(1, 118, 211, 0.35);
    background: #fff;
    color: var(--nt-launcher-blue-dark);
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    ul.wp-chatbot-messages-container
    > li.wp-chatbot-msg
    .wp-chatbot-paragraph,
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-bubble {
    background: #ffffff !important;
    color: #0b1230 !important;
    border: none;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    ul.wp-chatbot-messages-container
    > li.wp-chat-user-msg
    .wp-chatbot-paragraph {
    background: var(--nt-gradient) !important;
    color: #fff !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-editor {
    background: #fff;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .newtarget-editor
    input.wp-chatbot-editor {
    color: #181818 !important;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .newtarget-editor
    input.wp-chatbot-editor::placeholder {
    color: #747474 !important;
}

/*
 * Sidebar open: collapse the floating wrapper to the viewport corner so the
 * fixed panel (a child) is not offset by the pill's right: 20px inset.
 */
#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open {
    right: 0 !important;
    bottom: 0;
    width: 0;
    height: 0;
    overflow: visible;
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
    .wp-chatbot-container {
    right: 0 !important;
    left: auto !important;
    width: var(--nt-dottie-sidebar-width, 400px);
    max-width: min(var(--nt-dottie-sidebar-width, 400px), 100vw);
    margin: 0;
}

/*
 * Step 3 — Dreamforce-style push: shrink main + footer width (no translate).
 * Header / sticky header stay full width; content is not clipped on the left.
 */
html.nt-dottie-sidebar-push {
    --nt-dottie-sidebar-width: 400px;
    --nt-dottie-sidebar-duration: 0.48s;
    --nt-dottie-sidebar-easing: cubic-bezier(0.22, 1, 0.36, 1);
    overflow-x: clip;
}

@media (min-width: 768px) {
    body > main#content,
    body > main,
    body > #content,
    body > footer.elementor-location-footer {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        transition:
            width var(--nt-dottie-sidebar-duration, 0.48s)
                var(--nt-dottie-sidebar-easing, cubic-bezier(0.22, 1, 0.36, 1)),
            max-width var(--nt-dottie-sidebar-duration, 0.48s)
                var(--nt-dottie-sidebar-easing, cubic-bezier(0.22, 1, 0.36, 1));
    }

    /* Fills the right gutter during the transition so body white does not flash through */
    html.nt-dottie-sidebar-push::before {
        content: '';
        position: fixed;
        top: var(--nt-site-header-height, 0px);
        right: 0;
        bottom: 0;
        width: var(--nt-dottie-sidebar-width);
        background: var(--nt-launcher-surface, #ffffff);
        z-index: 10049;
        pointer-events: none;
        transition: width var(--nt-dottie-sidebar-duration) var(--nt-dottie-sidebar-easing);
    }

    html.nt-dottie-sidebar-push body > main#content,
    html.nt-dottie-sidebar-push body > main,
    html.nt-dottie-sidebar-push body > #content,
    html.nt-dottie-sidebar-push body > footer.elementor-location-footer {
        width: calc(100% - var(--nt-dottie-sidebar-width)) !important;
        max-width: calc(100% - var(--nt-dottie-sidebar-width)) !important;
    }

    /* Open: hold full-width layout until panel + gutter animate in (mirror of push-releasing). */
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > main#content,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > main,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > #content,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > footer.elementor-location-footer {
        width: 100% !important;
        max-width: 100% !important;
    }

    html.nt-dottie-sidebar-push.nt-dottie-push-opening::before {
        width: 0;
    }

    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > main#content,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > main,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > #content,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > footer.elementor-location-footer {
        width: 100% !important;
        max-width: 100% !important;
    }

    html.nt-dottie-sidebar-push.nt-dottie-push-releasing::before {
        width: 0;
    }

    html.nt-dottie-sidebar-push body > main .elementor-section.elementor-section-stretched,
    html.nt-dottie-sidebar-push body > main#content .elementor-section.elementor-section-stretched,
    html.nt-dottie-sidebar-push body > main#content > .elementor,
    html.nt-dottie-sidebar-push body > main > .elementor {
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    html.nt-dottie-sidebar-push .nt-dottie-push-target {
        overflow-x: clip;
    }
}

@media (prefers-reduced-motion: reduce) {
    body > main#content,
    body > main,
    body > #content,
    body > footer.elementor-location-footer,
    html.nt-dottie-sidebar-push body > main#content,
    html.nt-dottie-sidebar-push body > main,
    html.nt-dottie-sidebar-push body > #content,
    html.nt-dottie-sidebar-push body > footer.elementor-location-footer,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > main#content,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > main,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > #content,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening body > footer.elementor-location-footer,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > main#content,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > main,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > #content,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing body > footer.elementor-location-footer {
        transition: none !important;
    }

    html.nt-dottie-sidebar-push::before,
    html.nt-dottie-sidebar-push.nt-dottie-push-opening::before,
    html.nt-dottie-sidebar-push.nt-dottie-push-releasing::before {
        transition: none !important;
    }
}

/*
 * Sidebar above WP Responsive Menu hamburger (wprmenu.css uses z-index: 99999).
 * Panel is offset below site header; close button stays in the sidebar stacking context.
 */
html.nt-dottie-sidebar-push
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-container,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .wp-chatbot-container {
    z-index: 100000 !important;
}

html.nt-dottie-sidebar-push #wprmenu_bar,
html.nt-dottie-sidebar-push #wprmenu_bar.wprmenu_bar,
html.nt-dottie-sidebar-push .wprmenu_bar,
html.nt-dottie-sidebar-push .wprmenu_bar.custMenu,
html.nt-dottie-sidebar-push .wprmenu_bar.custMenu .wpr-custom-menu,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    #wprmenu_bar,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    #wprmenu_bar.wprmenu_bar,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    .wprmenu_bar,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    .wprmenu_bar.custMenu,
html:has(#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open)
    .wprmenu_bar.custMenu
    .wpr-custom-menu,
html:has(
        #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
            .wp-chatbot-board-container.active-chat-board
    )
    #wprmenu_bar,
html:has(
        #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
            .wp-chatbot-board-container.active-chat-board
    )
    .wprmenu_bar.custMenu
    .wpr-custom-menu {
    z-index: 9999 !important;
}

/* WP Responsive Menu open: sit below #mg-wprm-wrap (z-index: 9999). */
@media (max-width: 1024px) {
    html:has(#mg-wprm-wrap.cbp-spmenu-open)
        #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
        z-index: 9998 !important;
    }

    html:has(#mg-wprm-wrap.cbp-spmenu-open):has(
            #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
        ),
    html:has(#mg-wprm-wrap.cbp-spmenu-open):has(
            #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
                .wp-chatbot-board-container.active-chat-board
        ) {
        #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
            z-index: 10050 !important;
        }
    }
}

#wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
    .newtarget-chat-toolbar__actions
    #wp-chatbot-desktop-close {
    position: relative;
    z-index: 2;
}

@media (min-width: 1025px) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-pill,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar {
        right: 27px !important;
        bottom: 58px !important;
    }
}

@media (min-width: 1280px) {
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-pill,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar {
        bottom: 20px !important;
    }
}

@media (max-width: 767px) {
    /*
     * Pill anchor: same inset before/after panel close (no inline right/bottom from WPBot).
     */
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-pill,
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar {
        top: auto !important;
        left: auto !important;
        right: 20px !important;
        bottom: 20px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .nt-dottie-launcher {
        width: auto;
        margin: 0;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating {
        --nt-keyboard-inset: 0px;
        --nt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .wp-chatbot-container {
        top: 0;
        right: 0;
        left: auto;
        bottom: var(--nt-keyboard-inset, 0px);
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - var(--nt-keyboard-inset, 0px)) !important;
        max-height: calc(100dvh - var(--nt-keyboard-inset, 0px)) !important;
        transform: translate3d(100%, 0, 0);
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating .newtarget-board {
        padding-bottom: max(12px, var(--nt-safe-area-bottom, 0px));
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        .wp-chatbot-footer.newtarget-footer {
        padding-bottom: max(12px, var(--nt-safe-area-bottom, 0px));
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating
        #wp-chatbot-ball-container.qcchatbot-template-newtarget
        .wp-chatbot-container:has(.wp-chatbot-board-container.active-chat-board),
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-sidebar-open
        .wp-chatbot-container {
        transform: translate3d(0, 0, 0);
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-is-closing-sidebar
        .wp-chatbot-container {
        transform: translate3d(100%, 0, 0) !important;
    }

    /* Pill must return after close (WPBot inline layout + hidden launcher transitions). */
    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-pill
        .nt-dottie-launcher {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    #wp-chatbot-chat-container.qcchatbot-template-newtarget-floating.nt-dottie-state-pill
        .nt-dottie-ask-pill {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}