/* Toggle Button (Mobile) - Hidden by default */
.pac-ai-toggle-btn {
    display: none;
}

/* Chat Box Styles */
.pac-ai-actions {
    position: absolute;
    display: none;
    z-index: 10000;
    background: #fff;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    gap: 8px;
    align-items: center;
}

.pac-ai-actions-mobile-logo {
    display: none;
    width: 24px;
    height: 24px;
    margin-right: 2px;
}

@media screen and (max-width: 768px) {
    .pac-ai-actions-mobile-logo {
        display: block;
    }
}

.pac-ai-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
    color: #333;
    font-weight: bold;
}

.pac-ai-circle:hover {
    width: 80px;
    border-radius: 15px;
    font-size: 12px;
    padding: 0 10px;
}

.pac-ai-circle span {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pac-ai-circle:hover span {
    opacity: 1;
}

#pac-ai-unified-chat {
    position: absolute;
    width: 100%;
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.pix-chat-container {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    border: 8px solid #e0e0e0;
    padding: 0;
    overflow: hidden;
    /* Box shadow to add depth and thin outer line */
    box-shadow: 0 0 0 1px #777, inset 0 0 0 1px #777;
}

.pix-chat-header {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    border-radius: 8px 8px 0 0;
}

.pix-chat-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.pix-chat-close-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    padding: 0;
}

.pix-chat-close-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.pix-chat-body {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
    width: 100%;
    border-radius: 0 0 8px 8px;
}

deep-chat {
    overscroll-behavior: contain;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.pix-chat-quote {
    font-size: 12px;
    color: #666;
    border-left: 3px solid #0073aa;
    padding-left: 8px;
    margin-bottom: 10px;
    font-style: italic;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 0 4px 4px 0;
}

.pix-chat-form {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background: #fff;
    border-radius: 0 0 8px 8px;
}

/* Chat Box Input (Reddit Style) */
.chat-box-comment-box {
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 0;
    background-color: #fff;
    margin-bottom: 0;
}

.chat-box-textarea {
    border: none !important;
    box-shadow: 0 0 0 1px #c5c5c5 !important;
    resize: none;
    height: 40px;
    min-height: 40px;
    padding: 10px;
    background: transparent;
    overflow: hidden;
    transition: height 0.3s ease;
    width: 100%;
    font-size: 13px;
}

.chat-box-textarea:focus {
    box-shadow: 0 0 0 1px #c5c5c5 !important;
    outline: none !important;
}

.chat-box-actions {
    padding: 5px 10px;
    text-align: right;
    /* display: none; */
}

.chat-box-comment-box:focus-within .chat-box-actions {
    display: block;
}

.chat-box-submit {
    background-color: #0073aa;
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.chat-box-submit:hover {
    background-color: #005177;
}

/* Ask AI Button (Floating) */
.pac-ai-ask-btn {
    position: absolute;
    background: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1000;
    font-size: 14px;
    transform: translateY(-100%); /* Show on top */
    margin-top: -10px;
}

.pac-ai-ask-btn:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}


/* Highlighted Text */
.pac-ai-highlight {
    background-color: #ffeeba;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pac-ai-highlight.active {
    background-color: #ffc107 !important;
    /* border-bottom: 3px solid #666; */
}

/* Chat Messages */
.pac-ai-message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.pac-ai-message.user {
    background: #e3f2fd;
    margin-left: 20px;
    border-bottom-right-radius: 0;
}

.pac-ai-message.ai {
    background: #f1f1f1;
    margin-right: 20px;
    border-bottom-left-radius: 0;
}

.pac-ai-context-quote {
    font-size: 12px;
    color: #666;
    border-left: 3px solid #ccc;
    padding-left: 8px;
    margin-bottom: 8px;
    font-style: italic;
}

.input-button.inside-right { 
    right: calc(10% + 1.35em); 
}

/* Style for quote tag in chat messages */
.pac-ai-quote, blockquote, quote, cite {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: max-content;
    margin: 0 0 5px 0;
    color: #666;
    font-style: italic;
    background-color: #f5f5f5;
    padding: 5px 10px 3px 35px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
}

.pac-ai-quote:before, blockquote:before, quote:before, cite:before {
    font-family: 'vn-font';
    content: '\e803';
    font-size: 18px;
    height: 100%;
    font-style: normal;
    color: #888;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #e6e6e6;
    padding: 1px 4px 0 5px;
}

/* Chat Message Actions */
.pac-ai-msg-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    border-top: 1px solid #eee;
    padding-top: 5px;
    justify-content: flex-end;
}

.pac-ai-action-btn {
    background: none;
    border: none;
    color: #656565;
    cursor: pointer;
    font-size: 20px;
    padding: 2px 5px;
    border-radius: 3px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pac-ai-action-btn svg {
    width: 18px;
    height: 18px;
    fill: #656565;
}

.pac-ai-action-btn:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

/* Chat Tabs */
.pix-chat-tabs-header {
    display: flex;
    overflow: hidden;
    min-height: 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 5px auto;
}

.pix-chat-tab {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    background: #eee; /* Fallback */
    margin: 5px;
}

.pix-chat-tab:hover {
    transform: scale(1.1);
}

.pix-chat-tab.active {
    border-color: #666;
    transform: scale(1.2);
}

/* Chat Panes */
.pix-chat-pane {
    display: none;
    width: 100%;
}

.pix-chat-pane.active {
    display: block;
}

/* Sidebar Mode Visibility */
body.pac-gallery-mode .pix-chat-tabs-header {
    display: none !important;
}

body.pac-chat-mode .pix-chat-tabs-header {
    display: flex !important;
}

/* Sidebar Mode Visibility */
body.pac-gallery-mode .pix-chat-tabs-header {
}

body.pac-chat-mode .pix-chat-tabs-header {
}

/* Mobile Split View Logic */
@media (max-width: 768px) {
    /* Hide Gallery on Mobile */
    #pac-ai-gallery {
        display: none !important;
    }

    /* Ensure chat tabs are visible even if body has gallery-mode class */
    body.pac-gallery-mode .pix-chat-tabs-header {
        display: flex !important;
    }
    
    #pac-ai-unified-chat {
        position: fixed !important; bottom: 0 !important; left: 0 !important; top: auto !important; /* Override explicit top set by JS */
        width: 100% !important;
        height: 38% !important;
        height: 38dvh !important; /* Better mobile support */
        transition: height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
        
        /* Glass Effect applied to MAIN CONTAINER */
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 100%);
        box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: none;
        
        z-index: 2147483647 !important; /* Max safe integer */
        display: flex !important; /* Always display if present */
        flex-direction: column;
        padding-top: 0;
        pointer-events: auto !important;
        padding-bottom: env(safe-area-inset-bottom) !important; /* iOS Home Bar Safe Area */
        overflow: visible !important;
    }

    #pac-ai-unified-chat .pix-chat-tabs-header {
        background: transparent; /* Transparent so parent glass shines through */
        padding-top: 0;
        width: 100% !important;
        flex-shrink: 0;
        min-height: 35px; /* Ensure space for tabs */
        box-shadow: none;
        border: none;
        position: relative; /* Context for absolute button */
        overflow: visible !important;
    }

    .pac-ai-toggle-btn {
        display: flex;
        position: absolute;
        top: -20px;
        right: 30px;
        
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 10001;
        color: #666;
        padding: 0;
    }
    
    .pac-ai-toggle-btn i {
        font-size: 16px;
    }

    #pac-ai-unified-chat.expanded {
        height: 65% !important;
        height: 65dvh !important;
    }

    #pac-ai-unified-chat .pix-chat-container {
        height: auto !important;
        flex-grow: 1; /* Take remaining space */
        width: 100% !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 0 1px #c5c5c5, inset 0 0 0 1px #c5c5c5 !important;
        overflow: hidden; /* Prevent spill */
        
        background: transparent; /* Transparent so parent glass shines through */
        border-width: 6px !important; border-style: solid !important; border-radius: 20px !important; overflow: hidden !important;
    }

    #pac-ai-unified-chat .pix-chat-body-wrapper {
        flex-grow: 1;
        overflow: hidden;
        height: 100%;
    }

    #pac-ai-unified-chat .pix-chat-pane {
        height: 100%;
        display: none;
    }
    
    #pac-ai-unified-chat .pix-chat-pane.active {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    #pac-ai-unified-chat deep-chat {
        height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        flex-grow: 1;
        overflow: hidden;
        background-color: transparent !important;
        --deep-chat-container-color: transparent; /* Deep Chat variable */
    }


    /* Adjust main content so it is not hidden */
    div.post-content {
        padding-bottom: 50vh !important;
    }
}

@media (min-width: 769px) {
    #pac-ai-unified-chat {
        border-top: none !important;
    }
}


@media (max-width: 768px) {
    .pac-ai-actions {
        gap: 12px !important;
        border-radius: 20px !important;
        padding: 8px !important;
        /* display: flex !important; REMOVED to allow JS toggle */
    }
    .pac-ai-circle {
        width: 30px !important;
        height: 30px !important;
    }
    /* Ensure hover effect scales cleanly from the new base size if needed, 
       though hover on mobile is less relevant. 
       We override the width expansion on mobile to keep it simple or adjust it. */
    .pac-ai-circle:hover {
        width: 30px !important; /* Disable expansion on mobile to prevent layout shift? Or allow it? */
        /* If we allow expansion, it needs to be calculated. 
           Desktop expands 20 -> 80. Limit expansion or disable hover expand on mobile?
           Usually mobile interactions don't have hover. 
           Let's just set the base size. */
    }
    /* If user taps (active), maybe expand? 
       For now, let's stick to the size increase. */
}

.pac-ai-logo {
    height: 20px;
    width: auto;
    margin-left: 5px;
    display: none;
    vertical-align: middle;
}

.pac-ai-actions > .pac-ai-logo {
    display: inline-block;
}

.pac-ai-circle:hover .pac-ai-logo {
    display: inline-block;
}

/* Sticky unified chat styles */
.pix-container-boxed > .row:first-child > .col-xl-4.col-lg-4.col-md-12.d-xl-block {
    display: block !important;
    position: relative;
}

#pac-ai-chat-wrapper {
    /* Using absolute to stretch full track length of the flex column parent */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    /* Ensure no height limit so it stretches */
}

/* Ensure no ancestor clips the sticky position vertically */
/* But we usually do this in Javascript dynamically to avoid breaking layouts globally, 
   or we do it locally here for known wrappers */
.pix-container-boxed,
.pix-container-boxed > .row {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}




/* Guarantee full height for the sidebar containers to allow sticky chatbox full sliding range */
.pix-container-boxed > .row > .col-xl-4 {
    display: flex !important;
    flex-direction: column;
}

.pix-sidebar.pix-no-padding {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.widget_block.pix-sidebar-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pix-sidebar-form {
    flex-grow: 1;
    position: relative !important;
    min-height: 100%;
}

#pac-ai-chat-wrapper {
    /* Using absolute to stretch full track length of the flex column parent */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    /* No height explicit here, bottom 0 stretches it */
}




@media (min-width: 769px) {
    #pac-ai-unified-chat {
    }
}




/* Fixes for pointer events & gallery mode added back */
#pac-ai-chat-wrapper {
    pointer-events: none !important;
}

body.pac-gallery-mode #pac-ai-unified-chat {
    pointer-events: none !important;
}
body.pac-gallery-mode #pac-ai-unified-chat .pix-chat-tabs-header {
    pointer-events: auto !important;
}

@media (min-width: 769px) {
    #pac-ai-unified-chat {
        pointer-events: none !important;
    }
    #pac-ai-unified-chat .pix-chat-tabs-header,
    #pac-ai-unified-chat .pix-chat-container {
        pointer-events: auto !important;
    }
}

body.pac-gallery-mode #pac-ai-unified-chat .pix-chat-container {
    pointer-events: none !important;
    display: none !important;
}
/* Restore proper Desktop Sticky Navigation without ruining the whole page */
@media (min-width: 769px) {
    /* We safely allow overflow ONLY on the direct sidebar column, not the rows that hold images */
    .col-xl-4, .pix-sidebar-form {
        overflow: visible !important;
        clip-path: none !important;
    }
    
    #pac-ai-unified-chat {
        position: sticky !important;
        top: max(20px, calc(50vh - 300px)) !important;
        transform: none !important; /* prevent transforms from breaking sticky context */
    }
}