/* /Components/AI/AiChatDrawer.razor.rz.scp.css */
/* ── SmartTextArea styling to match MudBlazor ────────────────────────── */
[b-01wvdnv1om] .smart-textarea-wrapper {
    position: relative;
}

[b-01wvdnv1om] .ai-smart-textarea,
[b-01wvdnv1om] .smart-textarea-wrapper textarea {
    width: 100%;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 10px 14px;
    font-family: var(--mud-typography-body2-family), Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

[b-01wvdnv1om] .ai-smart-textarea:focus,
[b-01wvdnv1om] .smart-textarea-wrapper textarea:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

[b-01wvdnv1om] .ai-smart-textarea::placeholder,
[b-01wvdnv1om] .smart-textarea-wrapper textarea::placeholder {
    color: var(--mud-palette-text-disabled);
}

[b-01wvdnv1om] .ai-smart-textarea:disabled,
[b-01wvdnv1om] .smart-textarea-wrapper textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Message text wrapping ────────────────────────────────────────────── */
[b-01wvdnv1om] .msg-bubble {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Copy button appears on hover ────────────────────────────────────── */
[b-01wvdnv1om] .msg-bubble .msg-copy-btn {
    opacity: 0 !important;
    transition: opacity 0.2s;
}

[b-01wvdnv1om] .msg-bubble:hover .msg-copy-btn {
    opacity: 0.6 !important;
}

[b-01wvdnv1om] .msg-copy-btn:hover {
    opacity: 1 !important;
}

/* ── Markdown content within chat bubble ─────────────────────────────── */
[b-01wvdnv1om] .ai-markdown-container {
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body {
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body h1,
[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body h2,
[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body h1 {
    font-size: 1.1rem;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body p {
    margin-bottom: 0.5rem;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body p:last-child {
    margin-bottom: 0;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body pre {
    font-size: 0.8rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body code:not(pre code) {
    background-color: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.82em;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body table {
    font-size: 0.82rem;
    width: 100%;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body ul,
[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body li {
    margin-bottom: 0.2rem;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 12px;
    margin: 0.5rem 0;
    opacity: 0.85;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body strong {
    font-weight: 600;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

[b-01wvdnv1om] .ai-markdown-container .mud-markdown-body a:hover {
    text-decoration: underline;
}
/* /Components/Elements/Signage/LibraryPickerDialog.razor.rz.scp.css */
/* Card chips ride at the bottom of a 140px column — names of profiles and
   customers can run long. Truncate inside the chip while the chip stays
   within the column width; the full name is in the title attribute (hover). */
.picker-chip[b-qf2p13lakt] {
    max-width: 100%;
    min-width: 0;
}

.picker-chip-text[b-qf2p13lakt] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Elements/Signage/MediaCard.razor.rz.scp.css */
/* Reserved-height chip row keeps every card the same height regardless of
   how many chips render (0, 1, or 2). nowrap + overflow:hidden stops a long
   customer name from pushing chips onto a second line. */
.sc-card-chips[b-lxs32cv3h6] {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

/* Truncate the inside-chip label; min-width:0 on the chip lets the flex
   parent shrink it below content width so ellipsis kicks in. */
.sc-card-chip-profile[b-lxs32cv3h6],
.sc-card-chip-customer[b-lxs32cv3h6] {
  min-width: 0;
  max-width: 100%;
}

.sc-card-chip-text[b-lxs32cv3h6] {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Compact profile chip — icon only when both axes are populated. The icon
   is rendered as the chip's ChildContent (a MudIcon in our own markup) so
   scoped CSS can actually target it; passing it as MudChip's Icon arg
   wouldn't get the scope attribute and the styles would silently no-op. */
.sc-card-chip-profile-compact[b-lxs32cv3h6] {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  padding: 0 !important;
  justify-content: center;
  align-items: center;
}

.sc-card-chip-profile-compact-icon[b-lxs32cv3h6] {
  display: block;
  margin: 0;
}

/* Library-only sentinel — sits in the same row height as the others so
   empty cards align vertically with populated ones. */
.sc-card-chip-library[b-lxs32cv3h6] {
  max-width: 100%;
}
/* /Components/Elements/Signage/MediaUploadDialog.razor.rz.scp.css */
/* The locked-destination row prints a workspace or customer name verbatim;
   a long name would push the dialog wider. Truncate within a flex row so
   the prefix label stays anchored and the name takes whatever's left. */
.sc-upload-locked[b-k9pf7tab05] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.sc-upload-locked-label[b-k9pf7tab05] {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.sc-upload-locked-name[b-k9pf7tab05] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* MudSelect dropdown items wrap by default; with long names they make the
   popover absurdly wide. Cap width per row and truncate. */
.sc-upload-dest-item[b-k9pf7tab05] {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-nfngq97qhk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-nfngq97qhk] {
    flex: 1;
}

.sidebar[b-nfngq97qhk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-nfngq97qhk] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-nfngq97qhk]  a, .top-row[b-nfngq97qhk]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-nfngq97qhk]  a:hover, .top-row[b-nfngq97qhk]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-nfngq97qhk]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-nfngq97qhk] {
        justify-content: space-between;
    }

    .top-row[b-nfngq97qhk]  a, .top-row[b-nfngq97qhk]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-nfngq97qhk] {
        flex-direction: row;
    }

    .sidebar[b-nfngq97qhk] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-nfngq97qhk] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-nfngq97qhk]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-nfngq97qhk], article[b-nfngq97qhk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-nfngq97qhk] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-nfngq97qhk] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fkv6klxgrg],
.components-reconnect-repeated-attempt-visible[b-fkv6klxgrg],
.components-reconnect-failed-visible[b-fkv6klxgrg],
.components-pause-visible[b-fkv6klxgrg],
.components-resume-failed-visible[b-fkv6klxgrg],
.components-rejoining-animation[b-fkv6klxgrg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-retrying[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-failed[b-fkv6klxgrg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fkv6klxgrg] {
    display: block;
}


#components-reconnect-modal[b-fkv6klxgrg] {
    background-color: var(--mud-palette-surface, white);
    color: var(--mud-palette-text-primary, #333);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-divider, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: none;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fkv6klxgrg 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fkv6klxgrg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fkv6klxgrg 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fkv6klxgrg]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fkv6klxgrg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fkv6klxgrg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fkv6klxgrg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fkv6klxgrg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fkv6klxgrg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fkv6klxgrg] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fkv6klxgrg] {
    border: 0;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 6px 24px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.15s;
}

    #components-reconnect-modal button:hover[b-fkv6klxgrg] {
        background-color: var(--mud-palette-primary-darken);
    }

    #components-reconnect-modal button:active[b-fkv6klxgrg] {
        background-color: var(--mud-palette-primary);
    }

.components-rejoining-animation[b-fkv6klxgrg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fkv6klxgrg] {
        position: absolute;
        border: 3px solid var(--mud-palette-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fkv6klxgrg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fkv6klxgrg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fkv6klxgrg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/MySubscription/CheckoutPage.razor.rz.scp.css */
/* Billing-cycle segmented control.

   Built from plain <button>s rather than MudButtonGroup/MudToggleGroup so we own
   the active + hover states and the inline "save %" badge stays legible on BOTH
   the filled (active) and the muted segment. All colors come from MudBlazor
   palette variables, so it tracks the active theme and dark mode automatically.
   Scoped CSS only reaches elements declared in CheckoutPage.razor — these
   buttons/spans are ours, so the styles bind correctly. */

.sc-bcyc[b-5a0zjcgn06] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--mud-palette-background-grey);
  border: 1px solid var(--mud-palette-lines-default);
}

.sc-bcyc-opt[b-5a0zjcgn06] {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mud-palette-text-secondary);
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sc-bcyc-opt:hover:not(.sc-bcyc-active)[b-5a0zjcgn06] {
  color: var(--mud-palette-text-primary);
  background: var(--mud-palette-action-default-hover);
}

.sc-bcyc-opt:focus-visible[b-5a0zjcgn06] {
  outline: 2px solid var(--mud-palette-primary);
  outline-offset: 2px;
}

.sc-bcyc-active[b-5a0zjcgn06] {
  background: var(--mud-palette-primary);
  color: var(--mud-palette-primary-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* "Save X%" badge — green to draw the eye while Monthly is selected; on the
   active (filled) Yearly segment it switches to a translucent chip so it stays
   readable against the primary fill. */
.sc-bcyc-save[b-5a0zjcgn06] {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mud-palette-success);
  color: #fff;
  white-space: nowrap;
}

.sc-bcyc-active .sc-bcyc-save[b-5a0zjcgn06] {
  background: rgba(255, 255, 255, 0.26);
  color: var(--mud-palette-primary-text);
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* Search trigger in the app bar — looks like a fake search field with kbd
   hints for the Ctrl+K shortcut. Hidden by `d-md-none` on the icon-only
   mobile version (set in the .razor markup).

   Selectors qualified with `.mud-button` to outrank MudBlazor's outlined
   styles (specifically `.mud-button { text-transform: uppercase }` and
   `.mud-button-outlined { border: 1px solid currentColor }` which would
   otherwise force "SEARCH" all-caps and a 100%-opacity border).

   All colours derive from `currentColor` (= AppBar text colour) via
   color-mix, so the trigger reads correctly on both dark and light themes
   without redefining variables per mode. */

.mud-button.cmd-palette-trigger[b-gjfmw14jwr] {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 4px 8px 4px 12px;
    min-width: 220px;
    justify-content: flex-start;
    background: transparent;
    border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.mud-button.cmd-palette-trigger:hover[b-gjfmw14jwr] {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.cmd-palette-label[b-gjfmw14jwr] {
    flex: 1 1 auto;
    text-align: start;
    opacity: 0.6;
    margin-inline-end: 24px;
}

.cmd-palette-kbd[b-gjfmw14jwr] {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Each <kbd> styled like a small keycap, deriving from currentColor so it
   sits correctly on whatever appbar background (light, dark, branded). */
.cmd-palette-kbd kbd[b-gjfmw14jwr] {
    display: inline-block;
    padding: 1px 6px;
    min-width: 20px;
    text-align: center;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 3px;
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.5;
    color: inherit;
    opacity: 0.75;
}