/*
* Style settings of AI Embedder plugin
*
* AI Embedder has following default HTML elements:
*
* .ai-embedder-very-first-time
*   Show these elements on very first time visiting the service
*
* .ai-embedder-input-frame
*   Frame element of the input, needed a specially for checkboxs and radio buttons in WPForms
*
* .ai-embedder-input
*   Get input for the script from this elements
*
* .ai-embedder-filepond-element
*   INPUT element for the Filepond file upload
*
* .ai-embedder-answer-frame
*   Frame element of the answer of the AI query
*
* .ai-embedder-answer
*   Answer holder element. The content of this element is replaced with the answer html.
*
* .ai-embedder-button
*   Send button of the AI query
*
* .ai-embedder-wait-animation
*   Element to show the animation during the answer query
*
* .ai-embedder-uploaded-images-frame
*   Where to put and show the uploaded elements after the upload
*
* .ai-ebedder-error-popup
*   Popup of the error message
*
* .ai-embedder-list
*   Frame of the 1-2-3 list
*
* .ai-embedder-list-item
*   List item holder
*
* .ai-embedder-list-counter
*   List counter element
*
* .ai-embedder-list-headline
*   Headline of the list element
*
* .ai-embedder-list-description
*   Description of the list element
*/

.ai-embedder-input, .ai-embedder-filepond-element, .ai-embedder-answer-frame, .ai-embedder-answer, .ai-embedder-wait-animation, .ai-embedder-error-popup, .ai-embedder-show {
    /* Start display */
    display: none;
}

/* Basic styling of the text based input elements */

input[type="text"].ai-embedder-input,
input[type="email"].ai-embedder-input,
input[type="password"].ai-embedder-input,
input[type="search"].ai-embedder-input,
input[type="tel"].ai-embedder-input,
input[type="url"].ai-embedder-input,
input[type="number"].ai-embedder-input,
textarea.ai-embedder-input,
.ai-embedder-input-frame input[type="text"],
.ai-embedder-input-frame input[type="email"],
.ai-embedder-input-frame input[type="password"],
.ai-embedder-input-frame input[type="search"],
.ai-embedder-input-frame input[type="tel"],
.ai-embedder-input-frame input[type="url"],
.ai-embedder-input-frame input[type="number"],
.ai-embedder-input-frame textarea {
    color: var(--wp--preset--color--contrast, black)!important;
    background-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    border-width: 2px!important;
    border-color: lightgray!important;
    border-style:solid!important;
    padding:0.5rem 1rem 0.5rem 1rem!important;
    font-size:1.5rem!important;
    font-weight: 400!important;
    text-align:left!important;
    line-height: 1.2;
    height: auto;
}

/* Basic styling of the checkbox input elements */

input[type="checkbox"].ai-embedder-input, .ai-embedder-input-frame input[type="checkbox"], input[type="radio"].ai-embedder-input, .ai-embedder-input-frame input[type="radio"] { 
    position: absolute!important;
    overflow: hidden!important; 
    height: 2rem!important; 
    width: 2rem!important; 
    margin: -1px!important; 
    padding: 0!important; 
    border: 0!important; 
    appearance: auto!important;
}

input[type="checkbox"].ai-embedder-input + label, .ai-embedder-input-frame input[type="checkbox"] + label, input[type="radio"].ai-embedder-input + label, .ai-embedder-input-frame input[type="radio"] + label { 
    font-size: 1.5rem!important;
    font-weight: 400!important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 3rem!important;
}

input[type="checkbox"].ai-embedder-input:after, .ai-embedder-input-frame input[type="checkbox"]:after, input[type="radio"].ai-embedder-input:after, .ai-embedder-input-frame input[type="radio"]:after, input[type="checkbox"].ai-embedder-input:before, .ai-embedder-input-frame input[type="checkbox"]:before, input[type="radio"].ai-embedder-input:before, .ai-embedder-input-frame input[type="radio"]:before {
    opacity: 0!important;
}

input[type="checkbox"].ai-embedder-input:disabled, .ai-embedder-input-frame input[type="checkbox"]:disabled, input[type="radio"].ai-embedder-input:disabled, .ai-embedder-input-frame input[type="radio"]:disabled {
    opacity: 0.5!important;
    pointer-events: none!important;
}

.ai-embedder-input-frame .wpforms-image-choices .wpforms-image-choices-item {
    filter: grayscale(100%)!important;
}

.ai-embedder-input-frame .wpforms-image-choices .wpforms-image-choices-item img{
    max-width: 5rem;
}

.ai-embedder-input-frame .wpforms-image-choices .wpforms-image-choices-item:hover {
    filter: grayscale(90%)!important;
}

body .ai-embedder-input-frame .wpforms-image-choices .wpforms-image-choices-item.wpforms-selected {
    border: 3px solid var(--wp--preset--color--primary, #2b4162)!important;
    filter: grayscale(0%)!important;
}

.wpforms-container .ai-embedder-input-frame .wpforms-image-choices-modern label:not(.wpforms-error) {
    padding: 5px!important;
}

/* Basic styling of the select input */

select.ai-embedder-input, .ai-embedder-input-frame select {
    cursor: pointer!important;
    padding: 0.5rem 0.75rem 0.5rem 2rem!important;
    outline: 0!important;
    border: 2px solid lightgray!important;
    border-radius: 0px!important;
    background-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    background-repeat: no-repeat!important;
    color: var(--wp--preset--color--contrast, black)!important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")!important;
    background-size: 2rem!important;
    padding-left: 2rem!important;
    font-size: 1.5rem!important;
    line-height: 1.2!important;
    font-weight: 400!important;
    appearance: none;
    -webkit-appearance: none; /* Safari/Chrome */
    -moz-appearance: none;    /* Firefox */
}

select.ai-embedder-input:hover, select.ai-embedder-input:focus, .ai-embedder-input-frame select:hover, .ai-embedder-input-frame select:hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")!important;
    background-size: 2rem!important;
}

select.ai-embedder-input:disabled, .ai-embedder-input-frame select:disabled {
    opacity: 0.5!important;
    pointer-events: none!important;
}

/* List element with a big list numbers on the left side (do not use ol or ul, use p or div elements) */

.ai-embedder-list {
    counter-reset: ai-embedder-item-counter!important;
}

.ai-embedder-list-item {
    clear: both!important;
    margin-bottom: 1.5rem!important;
}

.ai-embedder-list-counter {
    width: 3rem!important;
    height: 3rem!important;
    font-size: 2rem!important;
    
    float: left!important;
    margin: 0rem 1rem 1rem 0rem!important;
    
    background-color: var(--wp--preset--color--primary, #2b4162)!important;
    color: var(--wp--preset--color--base, white)!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    font-weight: bold!important;
}

.ai-embedder-list-counter::before {
    counter-increment: ai-embedder-item-counter!important;
    content: counter(ai-embedder-item-counter)!important
}

.ai-embedder-list-headline {
    margin: 0rem!important;
    padding-bottom: 0.25rem!important;

    color: var(--wp--preset--color--primary, #2b4162)!important;
    font-size: 1.25rem!important;
    font-weight: 600!important;
    line-height: 1.2!important;
}

.ai-embedder-list-description {
    margin: 0rem!important;
    padding-bottom: 0.5rem!important;

    color: var(--wp--preset--color--contrast, black)!important;
    font-size: 1rem!important;
    font-weight: 400!important;
    line-height: 1.2!important;
}

/* AI answer frame */

.ai-embedder-answer-frame {
    padding: 1.5rem!important;
    background-color: var(--wp--preset--color--background-alt, #f3f3f3)!important;
    border: 3px solid var(--wp--preset--color--primary, #2b4162)!important;
    border-radius: 10px!important;
}

.ai-embedder-answer {
    line-height: 1.6!important;
    font-size: 1rem!important;
}

/* Markdown formatting in AI responses */

.ai-embedder-answer p {
    margin: 0 0 1rem 0!important;
}

.ai-embedder-answer h1,
.ai-embedder-answer h2,
.ai-embedder-answer h3,
.ai-embedder-answer h4 {
    margin: 1.5rem 0 0.75rem 0!important;
    font-weight: 600!important;
    line-height: 1.3!important;
    color: var(--wp--preset--color--primary, #2b4162)!important;
}

.ai-embedder-answer h1 { font-size: 1.75rem!important; }
.ai-embedder-answer h2 { font-size: 1.5rem!important; }
.ai-embedder-answer h3 { font-size: 1.25rem!important; }
.ai-embedder-answer h4 { font-size: 1.1rem!important; }

.ai-embedder-answer strong {
    font-weight: 600!important;
    color: var(--wp--preset--color--contrast, black)!important;
}

.ai-embedder-answer em {
    font-style: italic!important;
}

.ai-embedder-answer ul,
.ai-embedder-answer ol {
    margin: 0.75rem 0!important;
    padding-left: 2rem!important;
}

.ai-embedder-answer li {
    margin: 0.5rem 0!important;
    list-style-position: outside!important;
}

/* Hide extra <br> tags inside lists */
.ai-embedder-answer ul br,
.ai-embedder-answer ol br {
    display: none!important;
}

/* Hide extra <br> after lists */
.ai-embedder-answer ul + br,
.ai-embedder-answer ol + br {
    display: none!important;
}

.ai-embedder-answer code {
    background-color: #f5f5f5!important;
    padding: 0.2rem 0.4rem!important;
    border-radius: 3px!important;
    font-family: 'Courier New', monospace!important;
    font-size: 0.9em!important;
}

.ai-embedder-answer pre {
    background-color: #f5f5f5!important;
    padding: 1rem!important;
    border-radius: 5px!important;
    overflow-x: auto!important;
    margin: 1rem 0!important;
}

.ai-embedder-answer pre code {
    background-color: transparent!important;
    padding: 0!important;
}

/* Read more feature */
.ai-read-more {
    display: inline-block;
    margin: 0.75rem 0!important;
    padding: 0.35rem 0.75rem!important;
    background-color: var(--wp--preset--color--primary, #2b4162)!important;
    color: #fff!important;
    border: none!important;
    border-radius: 4px!important;
    cursor: pointer!important;
    font-size: 0.85rem!important;
    font-weight: 500!important;
    transition: background-color 0.2s ease!important;
}

.ai-read-more:hover {
    background-color: var(--wp--preset--color--contrast, #1a2d4a)!important;
}

.ai-read-less {
    display: inline-block;
    margin: 0.75rem 0!important;
    padding: 0.35rem 0.75rem!important;
    background-color: #eceff1!important;
    color: var(--wp--preset--color--primary, #2b4162)!important;
    border: 1px solid var(--wp--preset--color--primary, #2b4162)!important;
    border-radius: 4px!important;
    cursor: pointer!important;
    font-size: 0.8rem!important;
    font-weight: 500!important;
    transition: background-color 0.2s ease, color 0.2s ease!important;
}

.ai-read-less:hover {
    background-color: var(--wp--preset--color--primary, #2b4162)!important;
    color: #fff!important;
}

.ai-read-less:disabled {
    opacity: 0.6!important;
    cursor: not-allowed!important;
}

.ai-read-more:disabled {
    opacity: 0.6!important;
    cursor: not-allowed!important;
}

.ai-details {
    /* Details content (after horizontal line) - hidden by default */
    display: none;
}

.ai-embedder-answer blockquote {
    border-left: 4px solid var(--wp--preset--color--primary, #2b4162)!important;
    padding-left: 1rem!important;
    margin: 1rem 0!important;
    font-style: italic!important;
    color: #666!important;
}

.ai-embedder-answer a {
    color: var(--wp--preset--color--primary, #2b4162)!important;
    text-decoration: underline!important;
}

.ai-embedder-answer a:hover {
    opacity: 0.8!important;
}

.ai-embedder-answer hr {
    border: 0!important;
    border-top: 2px solid #ddd!important;
    margin: 1.5rem 0!important;
}

.ai-embedder-button, .ai-embedder-button-frame button {
	background-color: var(--wp--preset--color--primary, #2b4162)!important;
	border-radius:0.5rem!important;
	display:inline-block!important;
	cursor:pointer!important;
	color: var(--wp--preset--color--base, white)!important;
	font-size:1.75rem!important;
    font-weight: 600!important;
	padding:1rem 1.75rem!important;
	text-decoration:none!important;
    text-transform: uppercase!important;
    text-align: center!important;
    width: 100%!important;
    height: auto!important;
}

.ai-embedder-button:hover {
	text-decoration: underline!important;
}
.ai-embedder-button:active {
	position:relative!important;
	top:1px!important;
}

/* AI query waiting animation */

.ai-embedder-wait-animation {
    text-align: center;
}

.ai-embedder-wait-animation svg {
    max-height: 4rem;
    animation: search-animation-spin 2s linear infinite, search-animation-move-it 7.23s linear infinite!important; 
    transform-origin: center!important;
    position: relative!important;
}

@keyframes search-animation-spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(33deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-33deg); }
100% { transform: rotate(0deg); }
}

@keyframes search-animation-move-it {
0% { left: 0rem; }
25% { left: 2rem; }
50% { left: 0rem;}
75% { left: -1.75rem; }
100% { left: 0rem;}
}

/* Where the uploaded images are copied */
.ai-embedder-uploaded-images-frame img {
    max-width: 100%!important;
    max-height: 25vh!important;

    border-color: var(--wp--preset--color--neutral, #f3f3f3)!important;
    border-radius: 0.5rem!important;
}

/* Error popup */

.ai-embedder-error-popup {
    padding: 1rem!important;
    border: 4px solid var(--wp--preset--color--royal, red)!important;
    border-radius: 0.5rem!important;
}

.ai-embedder-error-popup h1, .ai-embedder-error-popup h2, .ai-embedder-error-popup h3 {
    margin-top: 0rem!important;
    color: var(--wp--preset--color--royal, red)!important;
}

/* Filepond element */
.filepond--drop-label, .filepond--drop-label * {
    cursor: pointer!important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ADMIN EDITOR - AI KNOWLEDGE BUTTONS
 * ═══════════════════════════════════════════════════════════════════════ */

/* Button container */
#ai-embedder-action-buttons {
    margin-bottom: 15px;
}

/* Base button styling */
.ai-embedder-action-btn {
    margin-right: 8px;
    margin-bottom: 8px;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

/* Button states */
.ai-embedder-action-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.ai-embedder-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ai-embedder-action-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Primary action button (Add to AI Knowledge) */
#ai-embedder-btn-add {
    background-color: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

#ai-embedder-btn-add:hover:not(:disabled) {
    background-color: #135e96;
    border-color: #135e96;
}

/* Cancel button */
#ai-embedder-btn-cancel {
    background-color: #f56e28;
    border-color: #f56e28;
    color: #fff;
}

#ai-embedder-btn-cancel:hover:not(:disabled) {
    background-color: #d55c1f;
    border-color: #d55c1f;
}

/* Re-upload button */
#ai-embedder-btn-reupload {
    background-color: #50575e;
    border-color: #50575e;
    color: #fff;
}

#ai-embedder-btn-reupload:hover:not(:disabled) {
    background-color: #3c434a;
    border-color: #3c434a;
}

/* Delete button */
#ai-embedder-btn-delete {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

#ai-embedder-btn-delete:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #c82333;
}

/* Status container */
#ai-embedder-status-container {
    margin-top: 10px;
}

/* Status box - already styled inline in PHP, but add transitions */
#ai-embedder-current-status {
    transition: all 0.3s ease;
}

/* Queue container */
#ai-embedder-queue-container {
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress bar animations */
#ai-embedder-queue-progress-bar {
    transition: width 0.3s ease;
}

/* Button group spacing for secondary actions */
#ai-embedder-btn-reupload + #ai-embedder-btn-delete {
    margin-left: 10px;
}