/* ----------------------------------------------------------------------------------------------- font-face ------------------------------------------------------ */
@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenAISans';
    src: url('Fonts/OpenAISans-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ----------------------------------------------------------------------------------------------- global styles ------------------------------------------------------ */
html, body {
    font-family: 'OpenAISans', sans-serif;
}

/* Override MudBlazor default font */
.mud-typography {
    font-family: 'OpenAISans', sans-serif;
}

/* Override MudBlazor default dialog border-radius */
.mud-dialog {
    border-radius: 8px !important;
}

/* Override MudBlazor default button border-radius */
.mud-button-root {
    border-radius: 8px !important;
}

/* Override MudBlazor default paper border-radius */
.mud-paper {
    border-radius: 8px !important;
}

/* Remove shadow from all buttons except MudFab */
.mud-button-root:not(.mud-fab) {
    box-shadow: none !important;
}

/* ----------------------------------------------------------------------------------------------- custom ------------------------------------------------------ */
.message-chat div {
    margin: 20px 40px;
}

.message-user div {
    border-radius: 10px;
    padding: 15px 20px;
    margin: 20px;
    max-width: 70%;
    background-color: #e7e7e7;
    float: right;
}

.message-default div {
    border-radius: 10px;
    padding: 15px 20px;
    margin: 20px;
    background-color: #e7e7e7;
}

.color-mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.color-mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

.color-mud-light-text {
    color: var(--mud-palette-overlay-light) !important;
}

.mud-nav-link .mud-icon-root {
    font-size: 16px !important;
    width: 1em !important;
    height: 1em !important;
    margin-top: 3px;
}

/* ----------------------------------------------------------------------------------------------- chat composer ------------------------------------------------------ */
/* Shared by ChatComponent and ProjectChatComponent. Ported from the operator, with the operator's
   design tokens re-pointed at the MudBlazor palette so light/dark follow the theme provider. */

.chat-composer {
    --chat-text: var(--mud-palette-text-primary);
    --chat-muted: var(--mud-palette-text-secondary);
    --chat-faint: var(--mud-palette-text-disabled);
    --chat-primary: var(--mud-palette-primary);
    --chat-primary-contrast: var(--mud-palette-primary-text);
    --chat-danger: var(--mud-palette-error);
    --chat-danger-soft: rgba(var(--mud-palette-error-rgb), 0.12);
    /* Tint over whatever the page background is, rather than a surface colour of its own -
       it stays correct on white, on grey and in dark mode. */
    --chat-tint: rgba(var(--mud-palette-text-primary-rgb), 0.06);
    /* The transcript above is flat on the page, but this still has to read as an input: one
       rounded surface holding the attachments, the field and the action row. */
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* focus-within, not :focus - the field, the chips and the buttons all live in here. */
    .chat-composer:focus-within {
        border-color: var(--chat-primary);
        box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.1);
    }

.chat-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 4px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--chat-text);
}

    .chat-input::placeholder {
        color: var(--chat-faint);
    }

.chat-composer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-composer__actions-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Round buttons: "+" and the mic on the left, send/stop/download on the right. */
.chat-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .chat-round svg,
    .chat-round .mud-icon-root {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

/* No outline of its own: the icon is the button, a tint only appears under the cursor. */
.chat-round--ghost {
    background: transparent;
    color: var(--chat-muted);
}

    .chat-round--ghost:hover {
        background: var(--chat-tint);
        color: var(--chat-primary);
    }

/* Recording is a mode, not a hover state - it stays lit until switched off. */
.chat-round--recording {
    color: var(--chat-danger);
    background: var(--chat-danger-soft);
}

    .chat-round--recording:hover {
        color: var(--chat-danger);
        background: var(--chat-danger-soft);
    }

.chat-round--send {
    background: var(--chat-primary);
    color: var(--chat-primary-contrast);
}

    .chat-round--send:hover {
        filter: brightness(1.15);
    }

.chat-round--stop {
    background: var(--chat-text);
    color: var(--mud-palette-surface);
}

    .chat-round--stop:hover {
        background: var(--chat-danger);
    }

.chat-round--busy {
    opacity: 0.5;
    pointer-events: none;
}

/* The native file control is unusable as-is; the label around it is the button. */
.chat-round input[type="file"] {
    display: none;
}

/* --------------------------------------------------------------------------------------------- chat attachments ---------------------------------------------------- */

.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 4px 0;
}

/* Already sent with a message - sits inside the user bubble. */
.chat-attachments--sent {
    margin-top: 10px;
    padding: 0;
}

/* A tint rather than a filled card, so the chip reads on the page background it sits on -
   the composer's grey, the user bubble's grey, or a dark surface. */
.chat-attachment {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 230px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(var(--mud-palette-text-primary-rgb), 0.06);
}

.chat-attachment--busy {
    opacity: 0.7;
}

.chat-attachment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
    color: var(--mud-palette-primary);
    font-size: 0.6rem;
    font-weight: 700;
}

.chat-attachment__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.chat-attachment__name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-attachment__kind {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.chat-attachment__remove {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

    .chat-attachment__remove:hover {
        background: var(--mud-palette-error);
        color: var(--mud-palette-white, #fff);
    }

/* The message markup floats the user bubble right, so its attachment row has to clear it. */
.message-user .chat-attachments--sent {
    justify-content: flex-end;
}

/* ----------------------------------------------------------------------------------------------- chat/form splitter ------------------------------------------- */
/* A full-height page fills the viewport under the app bar, and no panel inside does viewport
   arithmetic of its own - they all just ask for 100%. Scoped with :has() so only pages that opt
   in stop scrolling; every other page keeps its natural height. Making the grid a flex child is
   what lets its negative gutter margin cancel against the items' padding on its own, so no
   spacing value has to be hard-coded here. */
.mud-main-content:has(> .faip-fill-page) {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.faip-fill-page {
    flex: 1;
    min-height: 0;
}

.faip-fill-page > .mud-grid-item {
    height: 100%;
}

/* MudSplitPanel sizes its panels in pixels from JS and gives them flex: 1 1 auto, so the
   container has to carry a definite height of its own - taken from the grid item above. */
.chat-form-split {
    height: 100%;
}

/* Inside a dialog the height comes from the dialog body, not the viewport. */
.chat-form-split--dialog {
    height: 100%;
}

/* The divider draws nothing at rest - it is a plain gutter, and the resize cursor is the only
   hint that it is draggable. The grip below fades in on hover, drag and keyboard focus so the
   control stays discoverable and focus stays visible without adding a line to the layout. */
.chat-form-split__divider {
    position: relative;
    border-radius: 999px;
}

/* MudBlazor gives the divider a -12px inset ::before as an enlarged drag target. On a vertical
   divider the extra top/bottom reach buys nothing for grabbing, but it does extend 12px past the
   container - more than the layout's slack - which shows up as a couple of pixels of page scroll.
   Keep the horizontal reach, drop the vertical. Needs .divider in the selector to outweigh
   MudBlazor's own '.mud-split-panel .divider::before'. */
.mud-split-panel .divider.chat-form-split__divider::before {
    top: 0;
    bottom: 0;
}

/* The horizontal split drags the other way, so there the reach has to be flipped. */
.mud-split-panel .divider.chat-form-split__divider.horizontal::before {
    top: -12px;
    bottom: -12px;
    left: 0;
    right: 0;
}

    /* MudBlazor draws its own focus ring around the whole gutter; the grip replaces it. */
    .chat-form-split__divider:focus {
        outline: none;
    }

    .chat-form-split__divider::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: var(--mud-palette-primary);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .chat-form-split__divider:hover::after,
    .chat-form-split__divider:focus::after {
        opacity: 1;
    }

/* Horizontal split: the grip runs the other way. */
    .chat-form-split__divider.horizontal::after {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 4px;
        transform: translateY(-50%);
    }

/* ----------------------------------------------------------------------------------------------- login ------------------------------------------------------- */
/* Ported from the operator's Login.razor.css / EmptyLayout.razor.css, with its design tokens
   re-pointed at the MudBlazor palette. Both glows are struck from the brand primary so the
   General (navy) and IPET (coral) builds each tint their own backdrop. */

.login-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: radial-gradient(circle at top left, rgba(var(--mud-palette-primary-rgb), 0.16), transparent 32%), radial-gradient(circle at bottom right, rgba(var(--mud-palette-primary-rgb), 0.10), transparent 28%), var(--mud-palette-background);
}

/* .mud-paper pins every surface to an 8px radius app-wide; the login card is the exception,
   so it needs both the extra class for specificity and !important to win against it. */
.login-card.mud-paper {
    width: 100%;
    max-width: 460px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
    /* Frosted glass over the glows. The solid line is the fallback for browsers without
       color-mix; backdrop-filter simply no-ops where it is unsupported. */
    background: var(--mud-palette-surface);
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    backdrop-filter: blur(16px);
}

.login-card__content {
    display: flex;
    flex-direction: column;
    padding: 32px 40px 36px !important;
}

.login-card__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

/* Matches the operator's primary action: full width, taller than a stock button, and the
   card's own radius family rather than the app-wide 8px. */
.login-submit.mud-button-root {
    min-height: 2.9rem;
    border-radius: 14px !important;
    font-weight: 600;
}

/* Secondary actions read as links under the form, not as buttons beside it. */
.login-link.mud-button-root {
    align-self: center;
    background: transparent;
}

/* ----------------------------------------------------------------------------------------------- toast ------------------------------------------------------ */
.toast {
    width: 350px;
    max-width: 100%;
    font-size: .875rem;
    pointer-events: auto;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: .25rem
}

    .toast.showing {
        opacity: 0
    }

    .toast:not(.show) {
        display: none
    }

.toast-container {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    pointer-events: none
}

    .toast-container > :not(:last-child) {
        margin-bottom: .75rem
    }

.toast-header {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    color: #6c757d;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border-bottom: 1px solid rgba(0,0,0,.05);
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px)
}

    .toast-header .btn-close {
        margin-right: -.375rem;
        margin-left: .75rem
    }

.toast-body {
    padding: .75rem;
    word-wrap: break-word
}

.position-static {
    position: static !important
}

.w-100 {
    width: 100% !important
}

.w-75 {
    width: 75% !important
}

.rounded-3 {
    border-radius: .3rem !important
}

.align-self-end {
    align-self: flex-end !important
}

.align-self-start {
    align-self: flex-start !important
}

.align-items-stretch {
    align-items: stretch !important
}

/* ----------------------------------------------------------------------------------------------- trial-banner ------------------------------------------------- */
.trial-banner {
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}