/* Since the links using the ai-link-span class are created manually via the ConvertToMarkupText method, css-isolationm does not work there.
    A better solution needs to be found in the future, so that these css classes can be moved to the isolated css file (maybe use razor components instead of creating the links manually via strings).
*/

.ai-link-span {
    font: bold;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

    .ai-link-span img {
        max-width: 600px;
        max-height: 400px;
        object-fit: contain;
    }

/* Image reference placeholder (used temporarily during rendering) */
.ai-image-reference {
    display: inline-block;
    font-weight: bold;
    color: #007acc;
    padding: 2px 6px;
    margin: 0 2px;
    background-color: #f0f8ff;
    border-radius: 4px;
    cursor: default;
}

/* Individual search result image rendered inline */
.ai-search-result-image {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 4px;
    vertical-align: middle;
}

    .ai-search-result-image:hover {
        transform: scale(1.02);
    }

    .ai-search-result-image img {
        max-width: 600px;
        max-height: 400px;
        object-fit: contain;
        display: block;
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* Loading overlay for detail view */
.ai-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ai-loading-dialog {
    background-color: white;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: slideIn 0.3s ease-out;
}

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

.ai-loading-spinner {
    width: 48px;
    height: 48px;
    border: 15px solid #FFF;
    border-bottom-color: #015d82;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: aiLoaderRotation 1s linear infinite;
}

/* --- Approval Dialog Timer --- */

.ai-approval-timer {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-approval-timer-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ai-approval-timer-track {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 3;
}

.ai-approval-timer-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 1s linear, stroke 1s linear;
}

.ai-approval-timer-text {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    z-index: 1;
    transition: color 1s linear;
}

/* --- Approval Dialog Timer End --- */

/* --- Approval Dialog Buttons --- */

.ai-approval-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px;
}

.ai-approval-btn-reject.dxbl-btn {
    padding: 8px 20px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    color: #1f2933 !important;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ai-approval-btn-reject.dxbl-btn:hover {
    background-color: #f3f4f6 !important;
    border-color: #bdc4d4 !important;
}

.ai-approval-btn-approve.dxbl-btn {
    padding: 8px 20px !important;
    border: none !important;
    border-radius: 12px !important;
    background-color: #4267b3 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ai-approval-btn-approve.dxbl-btn:hover {
    background-color: #3558a0 !important;
}

/* --- Approval Dialog Buttons End --- */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ai-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    font-family: Arial, sans-serif;
}