:root {
    --app-bg-color: #f8f9fa;
    --app-text-color: #171717;
    --toast-bg: rgba(255,255,255,0.78);
    --toast-text: #0f172a; /* slate-900 */
}

.site-bg {
    background-color: var(--app-bg-color);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: transparent; /* override default banner style */
    bottom: auto;
    box-shadow: none;
    box-sizing: border-box;
    display: none; /* will be set to block by Blazor on error */
    left: 0;
    padding: 0;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
}

/* Fancy error popup overlay */
#blazor-error-ui.error-popup { inset: 0; background: rgba(0,0,0,0.35); }

#blazor-error-ui .error-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 520px;
    border-radius: 16px;
    padding: 18px 18px 14px 18px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 22px 60px rgba(0,0,0,0.25);
    animation: error-pop 200ms ease-out both;
}

@keyframes error-pop {
    from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#blazor-error-ui .error-message {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#blazor-error-ui .error-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #111;
    color: #fff;
    font-size: 18px;
}

#blazor-error-ui .error-text {
    font-weight: 800;
    color: #111;
}

#blazor-error-ui .error-subtext {
    font-size: 0.9rem;
    color: #444;
    margin-top: 2px;
}

#blazor-error-ui .error-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#blazor-error-ui .reload-btn {
    background-color: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    border: none;
}
#blazor-error-ui .reload-btn:hover { background-color: #2a2a2a; }

#blazor-error-ui .dismiss {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(17,17,17,0.06);
    color: #111;
}
#blazor-error-ui .dismiss:hover { background: rgba(17,17,17,0.12); }

/* Loader styles remain below ... */

/* Initial loader overlay */
.loader_main {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--app-bg-color);
    z-index: 1000;
    animation: loader-fade-in 0.25s ease both;
}

@keyframes loader-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Brand label above spinner */
.loader-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    color: #6b7280;
    text-transform: uppercase;
}

/* Spinner wrap — gives relative context for centered text */
.spinner-wrap {
    position: relative;
    width: 96px;
    height: 96px;
}

/* Outer ring — emerald-500, 120° arc, clockwise */
.spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #10b981 0deg 120deg,
        rgba(16, 185, 129, 0.10) 120deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin-cw 1.4s linear infinite;
}

/* Inner ring — emerald-600, 75° arc, counter-clockwise */
.spinner::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        #059669 0deg 75deg,
        rgba(5, 150, 105, 0.10) 75deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    animation: spin-ccw 2.2s linear infinite;
}

.spinner::after { content: ""; }

@keyframes spin-cw  { to { transform: rotate( 360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* Percentage text — centered inside the rings */
.loader_main .loading-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #374151;
}
.loader_main .loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "");
}

/* Auth overlay — seamless continuation of the load screen */
.auth-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--app-bg-color);
    z-index: 9999;
    animation: loader-fade-in 0.15s ease both;
}

.auth-overlay__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Percentage text — centered inside the rings */
.loader_main .loading-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #374151;
}
.loader_main .loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "");
}

/* Default blazor progress (kept for fallback) */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

code { color: #c02d76; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

#newTag { position: absolute; right: 0; top: 0; }

.buy_bt { cursor: pointer; }
/* ---------------------------------------------
   Toast notifications � refined glass look
   --------------------------------------------- */
/* Force all containers to the top-right */
.custom-toast-container.top-right,
.custom-toast-container.top-left,
.custom-toast-container.bottom-right,
.custom-toast-container.bottom-left {
    top: 16px; right: 16px; left: auto; bottom: auto;
}

.custom-toast {
    position: relative;
    width: min(92vw, 380px);
    pointer-events: auto; /* allow interactions on the toast */
    border-radius: 14px;
    padding: 10px 12px 12px 12px;
    background: var(--toast-bg) !important; /* force glass even if other rules exist */
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
    color: var(--toast-text);
    transform: translateY(8px) translateX(8px) scale(0.985);
    opacity: 0;
    animation: toast-in 180ms ease-out forwards;
    overflow: hidden;
}

/* Accent bar */
.custom-toast::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--toast-accent, #0f172a) 90%, transparent), transparent);
}

/* Auto-hide progress hint */
.custom-toast::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: color-mix(in srgb, var(--toast-accent, #0f172a) 85%, transparent);
    transform-origin: left;
    animation: toast-progress 5s linear forwards;
    opacity: 0.9;
}

@keyframes toast-in {
    from { transform: translateY(8px) translateX(8px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0)   translateX(0)   scale(1);     opacity: 1; }
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Header + body */
.custom-toast-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 6px 2px;
}
.custom-toast-header i {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--toast-accent, #0f172a) 22%, white);
    color: color-mix(in srgb, var(--toast-accent, #0f172a) 92%, black);
    font-size: 14px;
}
.custom-toast-header strong {
    color: var(--toast-text) !important;
    letter-spacing: 0.1px;
}
.custom-toast-header small {
    color: rgba(15,23,42,0.6) !important;
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
}
.custom-toast-header .close {
    margin-left: 6px;
    border: none;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(17,17,17,0.06);
    color: var(--toast-text) !important;
    opacity: 1 !important;
    font-weight: 900;
    cursor: pointer;
    display: inline-grid; place-items: center;
    transition: background-color .2s ease;
}
.custom-toast-header .close span {
    color: inherit !important;
    opacity: 1 !important;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}
.custom-toast-header .close:hover { background: rgba(17,17,17,0.14); }
.custom-toast-header .close:focus { outline: 2px solid rgba(15,23,42,0.25); outline-offset: 2px; }

.custom-toast-body {
    padding: 2px 2px 4px 2px;
    color: var(--toast-text);
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Level accents only (keep glass background) */
.custom-toast.Info    { --toast-accent: #0284c7; /* sky-600 */ }
.custom-toast.Success { --toast-accent: #10b981; /* emerald-500 */ }
.custom-toast.Warning { --toast-accent: #f59e0b; /* amber-500 */ }
.custom-toast.Error   { --toast-accent: #ef4444; /* red-500 */ }

/* Optional hover lift */
.custom-toast:hover { transform: translateY(-1px) translateX(0) scale(1.01); box-shadow: 0 26px 70px rgba(0,0,0,0.28); }

/* ---------------------------------------------
   AI Chat Citation Buttons
   --------------------------------------------- */
.ai-citation {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    margin-right: 0.5rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-bottom: 2px solid #8b5cf6;
    border-radius: 0.375rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.ai-citation:hover {
    border-color: #8b5cf6;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.1);
}

.ai-citation-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #8b5cf6;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ai-citation-content {
    display: flex;
    flex-direction: column;
}

.ai-citation-file {
    font-weight: 600;
    color: #374151;
}

.ai-citation-quote {
    color: #6b7280;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AI message text formatting */
.ai-message-text ul {
    list-style-type: disc;
    margin-left: 1.5rem;
}

.ai-message-text ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
}

.ai-message-text li {
    margin: 0.25rem 0;
}

.ai-message-text strong {
    font-weight: 600;
}

.ai-message-text h3 {
    margin: 0.75rem 0;
    font-weight: 600;
}

.ai-message-text p + p {
    margin-top: 0.75rem;
}

.ai-message-text pre > code {
    background: #f3f4f6;
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

/* AI markdown tables */
.ai-md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.875rem;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Remove excessive spacing before/after tables */
.ai-message-text br + .ai-md-table,
.ai-message-text .ai-md-table + br {
    display: none;
}

/* Hide multiple consecutive br tags */
.ai-message-text br + br + br {
    display: none;
}

.ai-message-text p {
    margin: 0.5rem 0;
}

.ai-message-text p:first-child {
    margin-top: 0;
}

.ai-message-text p:last-child {
    margin-bottom: 0;
}

.ai-md-table th,
.ai-md-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.ai-md-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.ai-md-table tr:last-child td {
    border-bottom: none;
}

.ai-md-table tr:hover td {
    background: #f9fafb;
}

/* AI citations container */
.ai-citations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}