html, body {
    font-family: var(--mud-typography-default-family, "ivystyle-sans", "Calibri", "Tahoma", sans-serif);
}

/* Blazor error UI */
#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;
}

/* Remove LastPass icons */
div[data-lastpass-icon-root] {
    display: none !important;
}

div[data-lastpass-root] {
    display: none !important;
}

/* Loading spinner */
.spinner {
    border: 16px solid silver;
    border-top: 16px solid var(--mud-palette-primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

.reduce-motion .spinner {
    animation: none;
}

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

    100% {
        transform: rotate(360deg)
    }
}

/* Reduce motion — user preference via theme setting */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Ensure MudBlazor drawer and overlay pop instead of slide */
.reduce-motion .mud-drawer,
.reduce-motion .mud-overlay {
    transition: none !important;
}

/* CSS-only fallback for OS-level preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Warning message */
.warning-message {
    margin-top: 20px;
    width: fit-content;
    background-color: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
    border: 1px solid var(--mud-palette-error);
    padding: 10px;
    border-radius: 5px;
}

/* Form validation */
.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Help text - consistent styling for field/section descriptions */
.help-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

/* Form action buttons spacing */
.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* Smooth main content reflow when drawer resizes */
.mud-main-content {
    transition: padding-left 0.2s ease;
}

/* Nav link icon vertical alignment */
.mud-drawer .mud-navmenu .mud-nav-link {
    align-items: center;
}

/* Mini drawer — hide nav link text when collapsed, show only icons */
.mud-drawer-mini.mud-drawer--closed {
    overflow-x: hidden;
}

.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text {
    opacity: 0;
    transition: opacity 0.1s ease;
    white-space: nowrap;
}

.mud-drawer-mini.mud-drawer--open .mud-nav-link-text {
    opacity: 1;
    transition: opacity 0.15s ease 0.1s;
    white-space: nowrap;
}

.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-divider {
    margin-left: 8px;
    margin-right: 8px;
}

/* Active nav link contrast on colored drawer backgrounds */
.mud-drawer .mud-navmenu .mud-nav-link.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--mud-palette-drawer-text) !important;
    font-weight: 700;
}

.mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon) !important;
}

/* Hover contrast on colored drawer backgrounds */
.mud-drawer .mud-navmenu .mud-nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* MudDataGrid — inherit root font size */
.mud-table .mud-table-cell,
.mud-table .mud-table-head .mud-table-cell {
    font-size: inherit;
}

/* MudBlazor form label sizing - increase for better readability */
.mud-input-label {
    font-size: 1rem !important;
}

.mud-input-label-inputcontrol {
    font-size: 1rem !important;
}

/* Use normal weight for text inputs — inherited bold from typography looks awkward */
.mud-input-slot.mud-input-root,
.mud-input-slot.mud-input-root textarea {
    font-weight: 400 !important;
}

/* Skip-to-content link for keyboard navigation */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-to-content:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
    text-decoration: none;
    outline: none;
}

/* ===== WCAG 2.2 AA Focus Indicators ===== */

/* Global focus-visible for interactive elements not covered by MudBlazor */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Skip link already has its own focus style — keep it */
.skip-to-content:focus-visible {
    outline: none;
}

/* Ensure MudBlazor icon buttons have adequate focus indicators */
.mud-icon-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Data grid rows need focus indicator when navigated by keyboard */
.mud-table-row:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Remove default outline on page-title elements (only programmatic focus) */
[data-page-title]:focus {
    outline: none;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== askwashuassistants-specific rules ===== */

/* Filled action buttons with colored backgrounds and white icons */
.mud-button-filled-default {
    background-color: #616161 !important;
    color: white !important;
}

.mud-button-filled-info {
    background-color: #2196f3 !important;
    color: white !important;
}

.mud-button-filled-error {
    background-color: #f44336 !important;
    color: white !important;
}

.mud-button-filled-success {
    background-color: #4caf50 !important;
    color: white !important;
}

/* Ensure SVG icons are white */
.mud-button-filled-default svg,
.mud-button-filled-info svg,
.mud-button-filled-error svg,
.mud-button-filled-success svg {
    color: white !important;
    fill: currentColor !important;
}

/* Right-align Actions column headers in datagrids */
th.actions-header-right,
.mud-table-head .actions-header-right {
    text-align: right !important;
}

th.actions-header-right .mud-table-cell-content,
.mud-table-head th.actions-header-right .mud-table-cell-content {
    justify-content: flex-end !important;
    display: flex !important;
}

th.actions-header-right > *,
th.actions-header-right > div {
    justify-content: flex-end !important;
    text-align: right !important;
}

.actions-header-right span,
th.actions-header-right span {
    width: 100%;
    text-align: right !important;
    display: block !important;
}

/* Prompt editor dialog — fill available space */
.prompt-editor-dialog .mud-dialog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.prompt-editor-textarea {
    flex: 1;
    width: 100%;
    resize: none;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
}

.prompt-editor-textarea:focus {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    padding: 11px;
}

/* ===== Agents Master-Detail Layout ===== */

/* Agent list item — clickable card in left panel */
.assistant-list-item {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
    padding: 12px 16px;
}

.assistant-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.assistant-list-item.selected {
    border-left-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.assistant-list-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Truncate description to single line */
.assistant-list-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail panel — flows with page; no inner scroll container */
.assistant-detail-panel {
}

/* Fix MudBlazor collapse animation: Blazor sets hidden on panel content
   in the same render batch as the exiting class, which removes content
   from layout before the grid-template-rows transition can animate.
   Override hidden during the exit phase so the transition has content
   to shrink. */
.mud-collapse-exiting .mud-expand-panel-content[hidden] {
    display: block !important;
}

/* No-selection placeholder */
.assistant-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--mud-palette-text-secondary);
}

/* Reduce motion — disable assistant list transitions */
.reduce-motion .assistant-list-item {
    transition: none;
}

/* ===== Agent Knowledge Master-Detail Layout ===== */

/* Source list item — mirrors .assistant-list-item for DataSourcePanel */
.source-list-item { cursor: pointer; border-left: 3px solid transparent; transition: background-color 0.15s, border-color 0.15s; padding: 12px 16px; }
.source-list-item:hover { background-color: var(--mud-palette-action-default-hover); }
.source-list-item.selected { border-left-color: var(--mud-palette-primary); background-color: var(--mud-palette-primary-hover); }
.source-list-item:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.source-list-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; color: var(--mud-palette-text-secondary); }
.reduce-motion .source-list-item { transition: none; }

/* Snackbar severity colors — WCAG 2.2 AA compliant (4.5:1+ contrast ratio)
   Light-theme palettes use very light Warning/etc. values meant for page backgrounds,
   which produce near-invisible snackbars. Override with accessible filled colors.
   Snackbars render via MudSnackbarProvider outside MudLayout (where theme classes live),
   so we target .mud-snackbar directly. Dark themes already have readable palette values. */
.mud-snackbar.mud-alert-filled-success,
.mud-snackbar .mud-alert-filled-success {
    background-color: #1b5e20 !important;
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-warning,
.mud-snackbar .mud-alert-filled-warning {
    background-color: #e65100 !important;
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-error,
.mud-snackbar .mud-alert-filled-error {
    background-color: #b71c1c !important;
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-info,
.mud-snackbar .mud-alert-filled-info {
    background-color: #0d47a1 !important;
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-normal,
.mud-snackbar .mud-alert-filled-normal {
    background-color: #424242 !important;
    color: #ffffff !important;
}
.mud-snackbar .mud-snackbar-icon { color: #ffffff !important; }

/* Snackbar close button — top-right corner */
.mud-snackbar { position: relative; }
.mud-snackbar .mud-snackbar-close-button {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border-radius: 50%;
    color: inherit;
    opacity: 0.6;
}
.mud-snackbar .mud-snackbar-close-button:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.1); }
.mud-snackbar .mud-snackbar-close-button .mud-icon-root { font-size: 14px; }

/* Reduce motion — disable MudBlazor dialog/expansion/snackbar transitions */
.reduce-motion .mud-expand-panel-content,
.reduce-motion .mud-dialog-container,
.reduce-motion .mud-snackbar {
    transition: none !important;
    animation: none !important;
}

/* ===== Custom Blazor Reconnect Modal ===== */

/* Our custom reconnectionHandler manages the modal visibility via
   components-reconnect-show class. The handler never gives up —
   it retries with backoff and auto-reloads when the circuit is gone. */

/* Override Blazor's built-in #components-reconnect-modal styles which
   include an opaque full-screen overlay. ID selector for specificity. */
#components-reconnect-modal {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: transparent !important;
    pointer-events: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: min(20vh, 160px) !important;
    opacity: 1 !important;
}

#components-reconnect-modal.components-reconnect-show {
    display: flex !important;
}

.reconnect-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    pointer-events: auto;
}

.reconnect-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #BA0C2F;
}

.reconnect-message {
    font-size: 0.9rem;
    color: #6b6b6b;
    margin: 0;
    line-height: 1.5;
}

/* Ring spinner — matches gptv2client loading style */
.reconnect-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.reconnect-ring {
    width: 48px;
    height: 48px;
}

.reconnect-ring-track {
    fill: none;
    stroke: #eee;
    stroke-width: 4;
}

.reconnect-ring-fill {
    fill: none;
    stroke: #BA0C2F;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    stroke-dashoffset: 80;
    transform-origin: center;
    animation: reconnect-spin 1.2s linear infinite;
}

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

/* Reduce motion */
.reduce-motion .reconnect-ring-fill { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .reconnect-ring-fill { animation: none; }
}

/*
 * Outlined Warning alert: MudBlazor default ties border, text, and icon to the
 * single Warning palette color. An amber-only box looks monotone and weak, so
 * split the concerns: neutral black border, theme-default text color, amber icon.
 */
.mud-alert-outlined-warning {
    border-color: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-text-primary) !important;
    align-items: center !important;
}

.mud-alert-outlined-warning .mud-alert-icon,
.mud-alert-outlined-warning .mud-alert-icon .mud-icon-root {
    color: var(--mud-palette-warning) !important;
}

/* MudAlert's icon defaults to top-of-line padding so it lines up with the
 * first text line. For a true vertical center against multi-line content,
 * zero the padding and center the icon cell within the flex row. */
.mud-alert-outlined-warning .mud-alert-icon {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-self: center !important;
}

/* Prompt editor — grow the textarea with the viewport so the editor uses the
   available detail area instead of staying at the static Lines=8 height.
   Subtracts the surrounding chrome (page/section headers, save buttons,
   helper text/counter, footer padding). The min-height floors it on short
   viewports so it never collapses below the equivalent of ~8 rows. */
.assistant-prompt-field textarea.mud-input-slot {
    height: calc(100vh - 360px) !important;
    min-height: 200px;
    resize: vertical;
}

/* Agent detail expansion panels (People / Prompt / Agent Knowledge).
   Flip the expand arrow to the leading edge so the icon precedes the header text.
   Section separators are real MudDivider siblings between panels in the markup. */
.assistant-detail-panels .mud-expand-panel-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 12px;
}

/* MudBlazor's default Material-styled expansion panels animate the panel
   margin and grow the header min-height (48 → 64) on expand, which makes
   the heading text slide down a few pixels mid-transition. Lock the header
   to a single fixed height and zero out the panel's expand-state margins so
   the heading stays put regardless of expand state. */
.assistant-detail-panels .mud-expand-panel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.assistant-detail-panels .mud-expand-panel-header,
.assistant-detail-panels .mud-expanded > .mud-expand-panel-header,
.assistant-detail-panels .mud-expand-panel-expanded > .mud-expand-panel-header,
.assistant-detail-panels .mud-panel-expanded > .mud-expand-panel-header {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    transition: none !important;
}

/* MudExpansionPanel applies its own border/divider line between siblings that
   toggles on expand (e.g., the body's top border replaces the header's bottom
   border, swapping 1px between elements). Combined with the explicit MudDivider
   sibling we render, this added up to a 1↔2px shift that jiggled the header.
   Strip the panel's intrinsic borders so only the MudDivider provides separation. */
.assistant-detail-panels .mud-expand-panel,
.assistant-detail-panels .mud-expand-panel-header,
.assistant-detail-panels .mud-expand-panel-content {
    border: 0 !important;
    box-shadow: none !important;
}

/* Admin assistants grid — keep column headers on a single line so expanding a row
   (which can re-trigger column auto-sizing in MudDataGrid) doesn't cause
   "Agent Name" to wrap to two lines. */
.admin-assistants-grid th {
    white-space: nowrap;
}