@import '_content/Cyfer.Client.DesignSystem/Cyfer.Client.DesignSystem.mn0tj7hqvt.bundle.scp.css';
@import '_content/Cyfer.Client.Onboarding/Cyfer.Client.Onboarding.cs4qw91pi8.bundle.scp.css';

/* /Features/Messages/BackupReminderBanner.razor.rz.scp.css */
/* A prompt above the chat list: set apart on a tinted card with its two answers beneath it. */
.backup-reminder[b-ot2teczggp] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    margin: var(--cyfer-space-small) var(--cyfer-space-medium);
    padding: 0.75rem var(--cyfer-space-medium);
    border: 1px solid color-mix(in srgb, var(--cyfer-primary-color), transparent 70%);
    border-radius: var(--cyfer-radius-large);
    background-color: color-mix(in srgb, var(--cyfer-primary-color), transparent 92%);
}

.backup-reminder p[b-ot2teczggp] {
    font-size: var(--cyfer-font-size-body);
    line-height: 1.45;
}

.actions[b-ot2teczggp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cyfer-space-medium);
}
/* /Features/Messages/MessagesPage.razor.rz.scp.css */
/*
    The chats view: a list beside a transcript, both inside the shell's content area.

    Every colour is a token. The chat bubbles use the two the design system already reserves for them
    (--cyfer-chat-user-background-color / --cyfer-chat-system-background-color), which is what keeps this
    page in step with light and dark without a rule of its own.
*/
.chats[b-7b1esos1md] {
    display: flex;
    align-items: stretch;
    height: 100%;
    min-height: 0;
}

.pane-header[b-7b1esos1md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cyfer-space-medium);
    min-height: 64px;
    padding-inline: var(--cyfer-space-medium);
    border-block-end: 1px solid var(--cyfer-divider-color);
}

    .pane-header h3[b-7b1esos1md] {
        margin: 0;
        font-size: var(--cyfer-font-size-title);
    }

.pane-note[b-7b1esos1md] {
    padding: var(--cyfer-space-medium);
    color: var(--cyfer-dim-text-color);
}

/* ── the list ───────────────────────────────────────────────────────────── */

.chat-list-pane[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    flex: 0 0 340px;
    width: 340px;
    min-height: 0;
    border-inline-end: 1px solid var(--cyfer-divider-color);
}

.chat-list[b-7b1esos1md] {
    flex-grow: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}

.chat-row[b-7b1esos1md] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--cyfer-space-medium);
    cursor: pointer;
    /* The selected row carries a pink edge, so every row reserves the space for one — otherwise
       selecting a row shifts its content sideways. */
    border-inline-start: 3px solid transparent;
}

    .chat-row:hover[b-7b1esos1md] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

    /* The rail's current-page treatment, so "where am I" reads the same way in both places. */
    .chat-row.selected[b-7b1esos1md] {
        background-color: color-mix(in srgb, var(--cyfer-primary-color), transparent 88%);
        border-inline-start-color: var(--cyfer-primary-color);
    }

/* The primary colour, not purple: purple is the light theme's primary and all but vanishes on the dark page. */
.avatar[b-7b1esos1md] {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--cyfer-primary-color);
    color: #fff;
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
}

.chat-text[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.chat-name[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-state[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-small);
    color: var(--cyfer-dim-text-color);
}

/* Which account a chat belongs to, while several accounts' chats are listed together. */
.chat-account[b-7b1esos1md] {
    align-self: flex-start;
    max-width: 100%;
    padding: 0 0.5rem;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: 999px;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-title[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.thread-as[b-7b1esos1md],
.sending-as[b-7b1esos1md] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
    overflow-wrap: anywhere;
}

.sending-as[b-7b1esos1md] {
    margin: 0;
    padding: var(--cyfer-space-small) var(--cyfer-space-medium) 0;
}

.new-chat[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    padding: var(--cyfer-space-medium);
    border-block-start: 1px solid var(--cyfer-divider-color);
}

    .new-chat .own-id[b-7b1esos1md] {
        margin: 0;
        font-size: var(--cyfer-font-size-small);
        color: var(--cyfer-dim-text-color);
        overflow-wrap: anywhere;
    }

    .new-chat input[b-7b1esos1md] {
        min-height: 34px;
        padding-inline: var(--cyfer-space-small);
        border: 1px solid var(--cyfer-control-border-color);
        border-radius: var(--cyfer-radius-medium);
        background-color: var(--cyfer-control-background-color);
        color: var(--cyfer-page-foreground-color);
        font: inherit;
        font-size: var(--cyfer-font-size-body);
    }

    .new-chat button[b-7b1esos1md] {
        min-height: 34px;
        border: 0;
        border-radius: var(--cyfer-radius-medium);
        background-color: var(--cyfer-action-button-background-color);
        color: var(--cyfer-action-button-foreground-color);
        font: inherit;
        font-size: var(--cyfer-font-size-body);
        cursor: pointer;
    }

    .new-chat button:disabled[b-7b1esos1md] {
        opacity: var(--cyfer-control-disabled-opacity);
        cursor: default;
    }

    .new-chat .new-chat-open[b-7b1esos1md] {
        display: flex;
        align-items: center;
        gap: var(--cyfer-space-small);
        font-size: var(--cyfer-font-size-small);
    }

        .new-chat .new-chat-open input[b-7b1esos1md] {
            min-height: auto;
        }

    .new-chat .join-by-link[b-7b1esos1md] {
        display: flex;
        gap: var(--cyfer-space-small);
    }

        .new-chat .join-by-link input[b-7b1esos1md] {
            flex-grow: 1;
            min-width: 0;
        }

/* ── the thread ─────────────────────────────────────────────────────────── */

.thread-pane[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
}

.thread-name[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-large);
    font-weight: 600;
}

.security-chip[b-7b1esos1md] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding-inline: 10px;
    /* A pixel on every state, so the two do not differ in size as well as in colour. */
    border: 1px solid transparent;
    border-radius: 14px;
    background-color: var(--cyfer-list-item-hover-background-color);
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}

/*
    The two states differ in their WORD first — "Quantum-safe" and "Encrypted" — and the dot only seconds
    it. Colour cannot be the signal here: it is the one distinction a reader with a colour-vision
    difference, or a screen reader, would never receive.
*/
.security-chip[b-7b1esos1md]::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 4px;
    background-color: currentColor;
}

.security-chip.quantum-safe[b-7b1esos1md] {
    border-color: var(--cyfer-pink-color);
    color: var(--cyfer-pink-color);
}

/* It is a button now — it opens the room panel — so it has to look like one to a keyboard. */
.security-chip[b-7b1esos1md] {
    font: inherit;
    font-size: var(--cyfer-font-size-small);
    cursor: pointer;
}

.security-chip:hover[b-7b1esos1md] {
    background-color: var(--cyfer-list-item-selected-background-color);
}

.security-chip:focus-visible[b-7b1esos1md] {
    outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
    outline-offset: var(--cyfer-focus-ring-offset);
}

/* Reads as held down while the panel it opened is showing. */
.security-chip.pressed[b-7b1esos1md] {
    background-color: var(--cyfer-page-background-color);
    border-color: var(--cyfer-pink-color);
}

.transcript[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    flex-grow: 1;
    overflow-y: auto;
    margin: 0;
    padding: var(--cyfer-space-medium);
    list-style: none;
    min-height: 0;
}

.bubble[b-7b1esos1md] {
    display: flex;
    align-items: baseline;
    gap: var(--cyfer-space-small);
    max-width: 62%;
    padding: 10px 14px;
    border-radius: var(--cyfer-radius-medium);
}

    .bubble.theirs[b-7b1esos1md] {
        align-self: flex-start;
        border: 1px solid var(--cyfer-divider-color);
        background-color: var(--cyfer-chat-system-background-color);
    }

    /* The colour says whose message it is in both alignments; only the edge moves. So a transcript that
       somehow carried neither class still reads correctly, which is why the shared rule is here rather
       than duplicated into the two below. */
    .bubble.mine[b-7b1esos1md] {
        background-color: var(--cyfer-chat-user-background-color);
    }

    /* Everything down one edge (the default), or your own thrown to the far side. Set in Settings and
       stored per device — see MessageAlignmentPreference. */
    .transcript.same-side .bubble.mine[b-7b1esos1md] {
        align-self: flex-start;
    }

    .transcript.alternating .bubble.mine[b-7b1esos1md] {
        align-self: flex-end;
    }

.bubble-text[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bubble-body[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-xsmall, 4px);
    min-width: 0;
}

.bubble-attachments[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment[b-7b1esos1md] {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--cyfer-space-small);
    align-items: center;
}

.attachment-name[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-detail[b-7b1esos1md] {
    grid-column: 1;
    font-size: var(--cyfer-font-size-small);
    opacity: 0.65;
}

.attachment-download[b-7b1esos1md] {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 4px 10px;
    border: 1px solid var(--cyfer-control-border-color);
    border-radius: var(--cyfer-radius-medium);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--cyfer-font-size-small);
    cursor: pointer;
}

.attachment-viewer[b-7b1esos1md] {
    position: fixed;
    inset: 5vh 5vw;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    padding: var(--cyfer-space-medium);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-page-background-color);
    color: var(--cyfer-page-foreground-color);
    overflow: hidden;
}

.attachment-viewer-header[b-7b1esos1md] {
    display: flex;
    align-items: center;
    gap: var(--cyfer-space-small);
}

.attachment-viewer-title[b-7b1esos1md] {
    flex-grow: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-viewer-image[b-7b1esos1md] {
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
}

.attachment-viewer-text[b-7b1esos1md] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--cyfer-font-size-body);
}

.bubble-time[b-7b1esos1md] {
    flex: 0 0 auto;
    font-size: var(--cyfer-font-size-small);
    color: var(--cyfer-dim-text-color);
}

.composer[b-7b1esos1md] {
    display: flex;
    gap: var(--cyfer-space-small);
    padding: var(--cyfer-space-medium);
}

    .composer input[b-7b1esos1md] {
        flex-grow: 1;
        min-height: 38px;
        padding-inline: 14px;
        border: 1px solid var(--cyfer-control-border-color);
        border-radius: var(--cyfer-radius-medium);
        background-color: var(--cyfer-control-background-color);
        color: var(--cyfer-page-foreground-color);
        font: inherit;
        font-size: var(--cyfer-font-size-body);
    }

    .composer .attach[b-7b1esos1md] {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding-inline: 14px;
        border: 1px solid var(--cyfer-control-border-color);
        border-radius: var(--cyfer-radius-medium);
        cursor: pointer;
    }

        .composer .attach[aria-disabled="true"][b-7b1esos1md] {
            opacity: 0.5;
            pointer-events: none;
        }

        /* Hidden, not removed: the label is what the person clicks, and a test sets files on the input directly. */
        .composer .attach[b-7b1esos1md]  input[type=file] {
            display: none;
        }

    /* Attach and Marking are secondary: outlined, in the text colour. Send is the one primary action. The icons
       are generated content with an empty alternative, so each control is still named by its word alone. */
    .composer .attach[b-7b1esos1md],
    .composer button[b-7b1esos1md] {
        gap: 6px;
        font: inherit;
        font-size: var(--cyfer-font-size-body);
        font-weight: var(--cyfer-font-weight-semibold);
    }

    .composer button[b-7b1esos1md] {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding-inline: 14px;
        border: 1px solid var(--cyfer-control-border-color);
        border-radius: var(--cyfer-radius-medium);
        background-color: var(--cyfer-control-background-color);
        color: var(--cyfer-page-foreground-color);
        cursor: pointer;
    }

    .composer .attach:hover[b-7b1esos1md],
    .composer button:not(:disabled):hover[b-7b1esos1md] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

    .composer .attach[b-7b1esos1md]::before,
    .composer [data-testid=send][b-7b1esos1md]::after {
        font-family: var(--cyfer-font-family-icon);
        font-size: var(--cyfer-font-size-icon-small);
        font-weight: normal;
        font-feature-settings: 'liga';
        line-height: 1;
    }

    .composer .attach[b-7b1esos1md]::before {
        content: "attach_file" / "";
    }

    .composer [data-testid=send][b-7b1esos1md] {
        padding-inline: 16px 12px;
        border-color: transparent;
        background-color: var(--cyfer-action-button-background-color);
        color: var(--cyfer-action-button-foreground-color);
    }

    .composer [data-testid=send][b-7b1esos1md]::after {
        content: "send" / "";
    }

    .composer [data-testid=send]:not(:disabled):hover[b-7b1esos1md] {
        background-color: var(--cyfer-action-button-hover-background-color);
    }

    .composer button:disabled[b-7b1esos1md] {
        opacity: var(--cyfer-control-disabled-opacity);
        cursor: default;
    }

.error[b-7b1esos1md] {
    padding: var(--cyfer-space-medium);
    color: var(--cyfer-danger-color);
}

/* ── the room panel ─────────────────────────────────────────── */

/*
    Over the thread, not beside it. The panel and its scrim are positioned against .thread-pane, which is
    why that pane is a containing block — an absolutely positioned panel with no positioned ancestor
    would escape to the viewport and cover the chat list too.
*/
.thread-pane[b-7b1esos1md] {
    position: relative;
}

.room-scrim[b-7b1esos1md] {
    position: absolute;
    inset: 0;
    background-color: var(--cyfer-overlay-scrim-color);
}

.room-panel[b-7b1esos1md] {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(340px, 100%);
    overflow-y: auto;
    border-inline-start: 1px solid var(--cyfer-divider-color);
    background-color: var(--cyfer-page-background-color);
}

.room-panel-header[b-7b1esos1md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cyfer-space-small);
    min-height: 64px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--cyfer-divider-color);
}

.room-panel-title[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-large);
    font-weight: 600;
}

.room-panel-close[b-7b1esos1md] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border: 0;
    border-radius: var(--cyfer-radius-medium);
    background-color: transparent;
    color: var(--cyfer-dim-text-color);
    font: inherit;
    font-size: var(--cyfer-font-size-title);
    cursor: pointer;
}

    .room-panel-close:hover[b-7b1esos1md] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

    .room-panel-close:focus-visible[b-7b1esos1md] {
        outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
        outline-offset: var(--cyfer-focus-ring-offset);
    }

.room-panel-body[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    padding: var(--cyfer-space-medium) 18px;
}

.room-guarantee[b-7b1esos1md] {
    margin: 0;
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
}

.tree-card[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 11px 14px;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-medium);
}

.tree-heading[b-7b1esos1md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cyfer-space-small);
}

.tree-name[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
}

.tree-cadence[b-7b1esos1md] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding-inline: 9px;
    border-radius: 11px;
    background-color: var(--cyfer-list-item-hover-background-color);
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}

.tree-suite[b-7b1esos1md] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

    .tree-suite code[b-7b1esos1md] {
        font-size: var(--cyfer-font-size-small);
        line-height: 1.4;
        /* A suite name is one long token with no break opportunities; without this it pushes the panel
           wider than the pane it sits in. */
        overflow-wrap: anywhere;
        color: var(--cyfer-dim-text-color);
    }

.suite-codepoint[b-7b1esos1md] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.suite-preview[b-7b1esos1md] {
    padding: 1px 5px;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: 8px;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}

.tree-rekey[b-7b1esos1md],
.room-note[b-7b1esos1md] {
    margin: 0;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
    line-height: 1.5;
}

.room-join-link[b-7b1esos1md] {
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--cyfer-space-small);
    border: 1px solid var(--cyfer-control-border-color);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-control-background-color);
    color: var(--cyfer-page-foreground-color);
    font-size: var(--cyfer-font-size-small);
}

.room-code[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-medium);
}

.room-code-value[b-7b1esos1md] {
    /* The value is long by construction — two epoch authenticators — so it wraps rather than scrolls:
       a code you have to drag sideways is one people compare the first line of. */
    overflow-wrap: anywhere;
    color: var(--cyfer-page-foreground-color);
    font-size: var(--cyfer-font-size-small);
    letter-spacing: 0.04em;
    line-height: 1.7;
}

.room-code h4[b-7b1esos1md],
.room-members h4[b-7b1esos1md] {
    margin: var(--cyfer-space-small) 0 var(--cyfer-space-small) 0;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Its card supplies the spacing above it; the shared rule's top margin would double it. */
.room-code h4[b-7b1esos1md] {
    margin-block-start: 0;
}

.room-members ul[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.room-members li[b-7b1esos1md] {
    display: flex;
    align-items: baseline;
    gap: var(--cyfer-space-small);
}

.member-name[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    overflow-wrap: anywhere;
}

.member-you[b-7b1esos1md] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: 9px;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}

/* Only a narrow screen has a way back to the list: everywhere else the list is beside the thread. */
.thread-back[b-7b1esos1md] {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-inline-start: calc(-1 * var(--cyfer-space-small));
    border: 0;
    border-radius: var(--cyfer-radius-medium);
    background: transparent;
    color: var(--cyfer-page-foreground-color);
    cursor: pointer;
}

    .thread-back:hover[b-7b1esos1md] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

.thread-header[b-7b1esos1md] {
    justify-content: flex-start;
}

    .thread-header .security-chip[b-7b1esos1md] {
        margin-inline-start: auto;
    }

/* Below 900px the two panes do not fit beside each other, so they take turns at the full width: the list until a
   chat is chosen, then the chat, with a back button to the list. */
@media (max-width: 899px) {
    .chat-list-pane[b-7b1esos1md] {
        flex: 1 1 auto;
        width: 100%;
        border-inline-end: 0;
    }

    .chats:not(.showing-thread) .thread-pane[b-7b1esos1md],
    .chats.showing-thread .chat-list-pane[b-7b1esos1md],
    .chats.showing-thread[b-7b1esos1md]  .accounts-column {
        display: none;
    }

    .thread-back[b-7b1esos1md] {
        display: inline-flex;
    }
}

/* On a phone the composer's text box takes a row of its own, with its buttons beneath it. */
@media (max-width: 599px) {
    .composer[b-7b1esos1md] {
        flex-wrap: wrap;
        padding: var(--cyfer-space-small) var(--cyfer-space-medium);
    }

        .composer input[b-7b1esos1md] {
            flex-basis: 100%;
            order: -1;
            font-size: var(--cyfer-font-size-large);
        }

        .composer [data-testid=send][b-7b1esos1md] {
            margin-inline-start: auto;
        }
}

/*
    A marking is seen before it is read: a strip in its colour (SecurityMarkingColour — the classification's own, or Cyfer's
    marking purple), the words small and in the ink that reads on it. A marked bubble is edged in the same colour.
*/
.bubble-marking[b-7b1esos1md] {
    display: block;
    text-align: center;
    font-size: var(--cyfer-font-size-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--marking, #502B85);
    color: var(--marking-ink, #FFFFFF);
    /* A light colour (TLP:CLEAR is white) still reads as a strip on a light bubble. */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marking, #502B85) 80%, #000);
}

.bubble[style*="--marking"][b-7b1esos1md] {
    border-inline-start: 3px solid var(--marking);
}

/* The room's level: a bar tinted in it and edged in it, with the level as a solid chip and the sentence beside it. */
.room-policy-bar[b-7b1esos1md] {
    display: flex;
    align-items: center;
    gap: var(--cyfer-space-small);
    margin: 0;
    padding: 6px 18px;
    border-inline-start: 4px solid var(--marking);
    background: color-mix(in srgb, var(--marking) 12%, transparent);
    border-block-end: 1px solid var(--cyfer-divider-color);
}

.room-level[b-7b1esos1md] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--marking);
    color: var(--marking-ink);
    font-size: var(--cyfer-font-size-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marking) 80%, #000);
}

.room-policy-banner[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-small);
    line-height: 1.45;
}

.marking-notice[b-7b1esos1md] {
    margin: 0;
    padding: 6px 18px;
    font-size: var(--cyfer-font-size-body);
    border-block-end: 1px solid var(--cyfer-divider-color);
}

.compose-marking[b-7b1esos1md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cyfer-space-small);
    padding: 4px 18px 0;
}

.compose-banner[b-7b1esos1md] {
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--marking, #502B85);
    color: var(--marking-ink, #FFFFFF);
    font-size: var(--cyfer-font-size-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marking, #502B85) 80%, #000);
}

/* Staged attachments, and a file's own marking. */
.staged-attachments[b-7b1esos1md] {
    list-style: none;
    margin: 0;
    padding: 4px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.staged-attachment[b-7b1esos1md] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--cyfer-font-size-body);
}

.attachment-portion[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-small);
    font-weight: 700;
}

/* Security-Labels phase 1 § 3. Not red: a warning about a marking does not become a control by being red. */
.compose-warning[b-7b1esos1md],
.bubble-spill[b-7b1esos1md] {
    display: block;
    font-size: var(--cyfer-font-size-small);
    font-weight: 600;
}

/* Roadmap decision F7. Lighter than a warning, and with no `role="alert"`: this is information, not a refusal. */
.compose-notice[b-7b1esos1md] {
    display: block;
    font-size: var(--cyfer-font-size-small);
}

.label-picker .room-panel-body[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
}

.label-choice[b-7b1esos1md],
.label-preview[b-7b1esos1md] {
    font-weight: 700;
}

.label-field[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label-tag-set[b-7b1esos1md] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--cyfer-divider-color);
}

.label-value[b-7b1esos1md] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 6px;
}

.label-value-name[b-7b1esos1md] {
    font-weight: 700;
}

.label-value-title[b-7b1esos1md] {
    font-size: var(--cyfer-font-size-body);
    opacity: 0.75;
}

.label-picker-actions[b-7b1esos1md] {
    display: flex;
    justify-content: flex-end;
    gap: var(--cyfer-space-small);
}

/* The page's plain <button>s and <select>s — the device prompts in the list pane, the marking and attachment
   controls — get the design system's outline look, so nothing here falls back to the browser's grey control. */
.pane-note button[b-7b1esos1md],
.pane-note select[b-7b1esos1md],
.room-note button[b-7b1esos1md],
.compose-marking button[b-7b1esos1md],
.compose-warning button[b-7b1esos1md],
.staged-attachment button[b-7b1esos1md],
.label-picker-actions button[b-7b1esos1md] {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--cyfer-control-border-color);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-control-background-color);
    color: var(--cyfer-page-foreground-color);
    font: inherit;
    font-size: var(--cyfer-font-size-body);
    cursor: pointer;
}

.pane-note button:not(:disabled):hover[b-7b1esos1md],
.room-note button:not(:disabled):hover[b-7b1esos1md],
.compose-marking button:not(:disabled):hover[b-7b1esos1md],
.compose-warning button:not(:disabled):hover[b-7b1esos1md],
.staged-attachment button:not(:disabled):hover[b-7b1esos1md],
.label-picker-actions button:not(:disabled):hover[b-7b1esos1md] {
    background-color: var(--cyfer-list-item-hover-background-color);
}

.pane-note[b-7b1esos1md] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cyfer-space-small);
}

    .pane-note > p[b-7b1esos1md] {
        flex-basis: 100%;
        margin: 0;
    }

/* A notice that this browser was removed or signed out is the error bar CyferMessage draws. */
.pane-note.error[b-7b1esos1md],
p.error[b-7b1esos1md] {
    margin: var(--cyfer-space-small) var(--cyfer-space-medium);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cyfer-danger-border-color);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-danger-surface-color);
    color: var(--cyfer-page-foreground-color);
}
/* /Features/Settings/AppearanceSettings.razor.rz.scp.css */
/*
    The alignment choice: two radios whose labels are small drawings of the transcript they produce.

    Every colour is a token. The previews reuse the same two chat-bubble tokens the transcript itself
    uses, so a preview cannot drift away from the thing it is previewing.
*/
.alignment[b-gulkqn7wkt] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    margin-block-end: var(--cyfer-space-medium);
    border: none;
    padding: 0;
    min-inline-size: 0;
}

    .alignment legend[b-gulkqn7wkt] {
        padding: 0;
        color: var(--cyfer-page-foreground-color);
        font-size: var(--cyfer-font-size-body);
    }

.alignment-lede[b-gulkqn7wkt] {
    margin: 0;
    max-inline-size: 60ch;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
    line-height: 1.5;
}

.alignment-options[b-gulkqn7wkt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cyfer-space-medium);
}

/* Clipped rather than display:none — the input is the control, and the other two ways of hiding it take
   it out of the tab order and the accessibility tree. Same reasoning as CyferSegmentedChoice. */
.alignment-control[b-gulkqn7wkt] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.alignment-option[b-gulkqn7wkt] {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 12px;
    max-inline-size: 340px;
    padding: var(--cyfer-space-medium);
    /* Two pixels on every state, so choosing one does not shift the other. */
    border: 2px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-medium);
    cursor: pointer;
}

    .alignment-option:hover[b-gulkqn7wkt] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

.alignment-control:checked + .alignment-option[b-gulkqn7wkt] {
    border-color: var(--cyfer-primary-color);
}

.alignment-control:focus-visible + .alignment-option[b-gulkqn7wkt] {
    outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
    outline-offset: var(--cyfer-focus-ring-offset);
}

.alignment-name[b-gulkqn7wkt] {
    display: flex;
    align-items: center;
    gap: var(--cyfer-space-small);
    font-size: var(--cyfer-font-size-large);
    font-weight: 600;
}

.alignment-default[b-gulkqn7wkt] {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding-inline: 8px;
    border-radius: 10px;
    background-color: var(--cyfer-list-item-hover-background-color);
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
    font-weight: 600;
}

.alignment-description[b-gulkqn7wkt] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
    line-height: 1.5;
}

/* ── the preview ────────────────────────────────────────────────────────── */

.alignment-preview[b-gulkqn7wkt] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    padding: 14px;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-small);
    background-color: var(--cyfer-page-background-color);
}

.preview-row[b-gulkqn7wkt] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.preview-alternating .preview-row.mine[b-gulkqn7wkt] {
    justify-content: flex-end;
}

.preview-avatar[b-gulkqn7wkt] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: var(--cyfer-primary-color);
}

.preview-row.mine .preview-avatar[b-gulkqn7wkt] {
    background-color: var(--cyfer-pink-color);
}

.preview-bubble[b-gulkqn7wkt] {
    height: 13px;
    border-radius: 5px;
    border: 1px solid var(--cyfer-divider-color);
    background-color: var(--cyfer-chat-system-background-color);
}

.preview-row.mine .preview-bubble[b-gulkqn7wkt] {
    border-color: transparent;
    background-color: var(--cyfer-chat-user-background-color);
}

/* Four bubbles of four widths, so the preview reads as a conversation rather than as a bar chart. */
.preview-row:nth-child(1) .preview-bubble[b-gulkqn7wkt] { width: 116px; }
.preview-row:nth-child(2) .preview-bubble[b-gulkqn7wkt] { width: 96px; }
.preview-row:nth-child(3) .preview-bubble[b-gulkqn7wkt] { width: 78px; }
.preview-row:nth-child(4) .preview-bubble[b-gulkqn7wkt] { width: 124px; }
/* /Features/Settings/SettingsPage.razor.rz.scp.css */
/*
    The settings page: one centred column, each section a card with the same heading, text and action
    rhythm. The sections are separate components, so everything below the page heading is reached through
    ::deep; the page sets the layout once and the sections keep only what is theirs.
*/
.settings-page[b-hqirlmrmt7] {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-medium);
    inline-size: 100%;
    max-inline-size: 46rem;
    margin-inline: auto;
    padding: var(--cyfer-space-xlarge) var(--cyfer-space-large) 4rem;
}

h1[b-hqirlmrmt7] {
    margin-block-end: var(--cyfer-space-small);
    font-size: var(--cyfer-font-size-headline);
    font-weight: var(--cyfer-font-weight-semibold);
    letter-spacing: -0.01em;
}

.settings-page[b-hqirlmrmt7]  > section {
    display: flex;
    flex-direction: column;
    gap: var(--cyfer-space-small);
    max-inline-size: none;
    margin: 0;
    padding: var(--cyfer-space-large);
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-large);
    background-color: var(--cyfer-page-background-color);
}

.settings-page[b-hqirlmrmt7]  > section h2 {
    margin: 0 0 var(--cyfer-space-xsmall);
    font-size: var(--cyfer-font-size-large);
    font-weight: var(--cyfer-font-weight-semibold);
}

.settings-page[b-hqirlmrmt7]  > section h3 {
    margin: var(--cyfer-space-medium) 0 0;
    padding-block-start: var(--cyfer-space-medium);
    border-block-start: 1px solid var(--cyfer-divider-color);
    font-size: var(--cyfer-font-size-body);
    font-weight: var(--cyfer-font-weight-semibold);
}

.settings-page[b-hqirlmrmt7]  > section p {
    max-inline-size: 65ch;
    font-size: var(--cyfer-font-size-body);
    line-height: 1.5;
}

.settings-page[b-hqirlmrmt7]  > section .detail {
    color: var(--cyfer-dim-text-color);
    opacity: 1;
}

.settings-page[b-hqirlmrmt7]  > section .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cyfer-space-small);
    margin-block-start: var(--cyfer-space-small);
}

/* The two sections that cannot be taken back sit last, under a danger edge, and their actions are
   outlined in the danger colour rather than written as links. */
.settings-page[b-hqirlmrmt7]  > section.sign-out-other-devices,
.settings-page[b-hqirlmrmt7]  > section.account-deletion {
    border-color: var(--cyfer-danger-border-color);
}

.settings-page[b-hqirlmrmt7]  > section.sign-out-other-devices .actions button,
.settings-page[b-hqirlmrmt7]  > section.account-deletion .actions button {
    min-height: var(--cyfer-control-height);
    margin-inline: 0;
    padding-inline: var(--cyfer-space-medium);
    border: 1px solid var(--cyfer-danger-border-color);
    color: var(--cyfer-danger-color);
}

.settings-page[b-hqirlmrmt7]  > section.sign-out-other-devices .actions button:hover,
.settings-page[b-hqirlmrmt7]  > section.account-deletion .actions button:hover {
    background-color: var(--cyfer-danger-surface-color);
    text-decoration: none;
}

@media (max-width: 599px) {
    .settings-page[b-hqirlmrmt7] {
        padding: var(--cyfer-space-large) var(--cyfer-space-medium) var(--cyfer-space-xlarge);
    }

    .settings-page[b-hqirlmrmt7]  > section {
        padding: var(--cyfer-space-medium);
    }
}

/* An outcome the section reports after an action: set apart from the explanation above it. */
.settings-page[b-hqirlmrmt7]  > section .notice {
    padding: var(--cyfer-space-small) 0.75rem;
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-surface-color);
}

.settings-page[b-hqirlmrmt7]  > section .notice:empty {
    display: none;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
    The shell is a column: the header, then the rail beside the content. The viewport height lives here
    rather than on .page — leaving it on .page would make the two of them 100dvh EACH and push the rail off
    the bottom by exactly the height of the header.

    The header and rail share the surface colour and frame the content, which sits on the page colour with
    a rounded inner corner: the frame is chrome, the content is the work.
*/
.shell[b-r94eqvug6n] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: var(--cyfer-surface-color);
}

.shell-header[b-r94eqvug6n] {
    display: flex;
    align-items: center;
    gap: var(--cyfer-space-medium);
    flex: 0 0 3.25rem;
    padding-inline: var(--cyfer-space-medium);
}

/* The wordmark's letters take `color`; its bars are always pink. */
.shell-brand[b-r94eqvug6n] {
    flex: none;
    inline-size: 4.25rem;
    color: light-dark(var(--cyfer-purple-color), #fff);
}

.shell-header[b-r94eqvug6n]  .global-search {
    flex: 1;
    min-inline-size: 0;
    padding-inline: 0;
}

.page[b-r94eqvug6n] {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    /* Without this a tall page stretches the row instead of scrolling inside it, and the header leaves. */
    min-height: 0;
}

.main-wrapper[b-r94eqvug6n] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

main[b-r94eqvug6n] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background-color: var(--cyfer-page-background-color);
}

.content[b-r94eqvug6n] {
    flex-grow: 1;
    min-height: 0;
}

div#background-image[b-r94eqvug6n] {
    position: absolute;
    top: 0;
    left: 0;
    /* The page's own size, not the viewport's: it sits inside .page, which is the viewport minus the
       header. Viewport units here would hang the header's height of image below the fold. */
    height: 100%;
    width: 100%;
    z-index: -1;
    background-color: var(--cyfer-page-background-color);
    background-size: cover;
    background-size: 2135px 1409px;
    transition: filter 1s;
}

div#background-image.blurred[b-r94eqvug6n] {
    filter: blur(5px);
}

@media (min-width: 600px) {
    main[b-r94eqvug6n] {
        border-block-start: 1px solid var(--cyfer-divider-color);
        border-inline-start: 1px solid var(--cyfer-divider-color);
        border-start-start-radius: var(--cyfer-radius-large);
    }
}

@media (max-width: 599px) {
    .shell-brand[b-r94eqvug6n] {
        inline-size: 3.5rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-f5gg0rrtt1] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-f5gg0rrtt1] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-f5gg0rrtt1] {
    font-size: var(--cyfer-font-size-large);
}

.bi[b-f5gg0rrtt1] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-f5gg0rrtt1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-f5gg0rrtt1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-f5gg0rrtt1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-f5gg0rrtt1] {
    font-size: var(--cyfer-font-size-body);
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-f5gg0rrtt1] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-f5gg0rrtt1] {
        padding-bottom: 1rem;
    }

    .nav-item[b-f5gg0rrtt1]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-f5gg0rrtt1]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-f5gg0rrtt1]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-f5gg0rrtt1] {
        display: none;
    }

    .collapse[b-f5gg0rrtt1] {
        
        display: block;
    }

    .nav-scrollable[b-f5gg0rrtt1] {
        
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* The signed-in landing: a short welcome and the two places most visits go next. */
.home[b-j033s99c6b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cyfer-space-small);
    max-inline-size: 44rem;
    margin-inline: auto;
    padding: 12vh var(--cyfer-space-large) var(--cyfer-space-xlarge);
}

.home-mark[b-j033s99c6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: var(--cyfer-space-small);
    border-radius: var(--cyfer-radius-large);
    background-color: color-mix(in srgb, var(--cyfer-primary-color), transparent 88%);
    color: var(--cyfer-link-color);
}

h1[b-j033s99c6b] {
    font-size: var(--cyfer-font-size-headline);
    font-weight: var(--cyfer-font-weight-semibold);
    letter-spacing: -0.015em;
}

.home-lede[b-j033s99c6b] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-large);
}

.home-cards[b-j033s99c6b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--cyfer-space-medium);
    inline-size: 100%;
    margin-block: var(--cyfer-space-large) var(--cyfer-space-small);
}

.home-card[b-j033s99c6b] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 2px;
    align-items: center;
    padding: var(--cyfer-space-medium) var(--cyfer-space-large) var(--cyfer-space-medium) var(--cyfer-space-medium);
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-large);
    background-color: var(--cyfer-page-background-color);
    color: var(--cyfer-page-foreground-color);
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.home-card:hover[b-j033s99c6b] {
    border-color: var(--cyfer-control-hover-border-color);
    background-color: var(--cyfer-surface-color);
}

.home-card[b-j033s99c6b]  .icon {
    grid-row: 1 / span 2;
    color: var(--cyfer-link-color);
}

.home-card-title[b-j033s99c6b] {
    font-weight: var(--cyfer-font-weight-semibold);
}

.home-card-detail[b-j033s99c6b] {
    grid-column: 2;
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
}

@media (prefers-reduced-motion: reduce) {
    .home-card[b-j033s99c6b] {
        transition: none;
    }
}
/* /Shared/ActionKeys.razor.rz.scp.css */
.action-keys[b-r5u8dkofsi] {
  display: flex;
  gap: 3px;
  padding-inline-end: 8px;
}

.action-key[b-r5u8dkofsi] {
  border: 1px solid var(--cyfer-divider-color);
  border-radius: 3px;
  padding: 3px 6px;
  margin-block-end: 3px;
  font-size: var(--cyfer-font-size-small);
  color: var(--cyfer-dim-text-color);
}
/* /Shared/ActionPalette.razor.rz.scp.css */
#action-palette-wrapper[b-fku96gxmu4] {
  position: fixed;
  top: 20px;
  width: 100dvw;
  z-index: 10000;
  display: flex;
  justify-content: center;

  #action-palette-background {
    width: 70dvw;
    height: 30rem;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--cyfer-divider-color);

    #action-palette {
      background: transparent;
      display: flex;
      flex-direction: column;

      input {
        background: transparent;
        border: none;        
        padding: 12px;
        width: 100%;

        &:focus {
          outline: none;
        }
      }

      ul[b-fku96gxmu4] {
        overflow-y: always;
        flex-grow: 1;
        border-block-start: 1px solid var(--cyfer-divider-color);
        padding-inline-start: 8px;
      }
    }
  }
}

.acrylic[b-fku96gxmu4] {
    background: var(--cyfer-acrylic-tint-color);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: 0 3px 3px var(--cyfer-acrylic-shadow-color);
}

.acrylic[b-fku96gxmu4]::before {
    
    background: url(/static/acrylic-noise-1.svg);
    mix-blend-mode: soft-light;
    opacity: 0.08;
    position: absolute;
    width: 100%;
    height: 100%;
}
/* /Shared/ActionPaletteMatch.razor.rz.scp.css */
li[b-4wlccnka47] {
    display: flex;
    border-radius: 4px;
    height: 3rem;
    justify-content: center;
    padding-block: 8px;
    padding-inline-start: 8px;

    &.selected {
      background: var(--cyfer-list-item-selected-background-color);
    }

    &:hover[b-4wlccnka47] {
      background: var(--cyfer-list-item-hover-background-color);
    }

    .action-title[b-4wlccnka47] {
      flex-grow: 1;
      text-overflow: ellipsis;
      align-content: center;
    }
  }
/* /Shared/AutoGrowTextArea.razor.rz.scp.css */
.grow-wrap[b-rovlbqe1ha] {
  
  display: grid;
}

  .grow-wrap[b-rovlbqe1ha]::after {
    
    content: attr(data-replicated-value) " ";
    
    white-space: pre-wrap;
    
    visibility: hidden;
  }

  .grow-wrap > textarea[b-rovlbqe1ha] {
    
    resize: none;
    
    overflow: hidden;
  }

  .grow-wrap > textarea[b-rovlbqe1ha],
  .grow-wrap[b-rovlbqe1ha]::after {
    
    background-color: var(--cyfer-page-background-color);
    color: var(--cyfer-page-foreground-color);
    border: none;
    padding: 0.5rem;
    font: inherit;
    word-break: break-all;
    
    grid-area: 1 / 1 / 2 / 2;
  }

label[b-rovlbqe1ha] {
  display: block;
}
/* /Shared/EmptySection.razor.rz.scp.css */
.empty-section[b-ohss3fey1y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cyfer-space-small);
    max-inline-size: 28rem;
    margin: 18vh auto 0;
    padding-inline: var(--cyfer-space-large);
    text-align: center;
}

.empty-icon[b-ohss3fey1y] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin-block-end: var(--cyfer-space-small);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--cyfer-primary-color), transparent 88%);
    color: var(--cyfer-link-color);
}

.empty-icon[b-ohss3fey1y]  .icon {
    font-size: var(--cyfer-font-size-icon-large);
}

h1[b-ohss3fey1y] {
    font-size: var(--cyfer-font-size-title);
    font-weight: var(--cyfer-font-weight-semibold);
}

p[b-ohss3fey1y] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
    line-height: 1.5;
}
/* /Shared/GlobalSearch.razor.rz.scp.css */
/*
    The shell's search bar: one field, centred, above every section.

    Every colour is a token. The results panel is positioned against .global-search, which is why that is
    the containing block — anchoring it to the viewport instead would leave it in place while the page
    behind it scrolled.
*/
.global-search[b-ls25nhtp2i] {
    position: relative;
    display: flex;
    justify-content: center;
    padding-inline: var(--cyfer-space-medium);
}

.search-field[b-ls25nhtp2i] {
    display: flex;
    align-items: center;
    gap: var(--cyfer-space-small);
    inline-size: 100%;
    max-inline-size: 560px;
    min-block-size: 32px;
    padding-inline: 10px 6px;
    border: 1px solid var(--cyfer-control-border-color);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-control-background-color);
}

    .search-field:focus-within[b-ls25nhtp2i] {
        outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
        outline-offset: var(--cyfer-focus-ring-offset);
    }

    .search-field input[b-ls25nhtp2i] {
        flex-grow: 1;
        min-inline-size: 0;
        border: 0;
        background: transparent;
        color: var(--cyfer-page-foreground-color);
        font: inherit;
        font-size: var(--cyfer-font-size-body);
    }

    /* The field already draws a ring around the whole control; a second one inside it is noise. */
    .search-field input:focus[b-ls25nhtp2i] {
        outline: none;
    }

/*
    The scope badge, and it is load-bearing rather than decorative: it is the only thing on screen saying
    the answer comes from this device and cannot come from anywhere else.
*/
.search-scope[b-ls25nhtp2i] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-block-size: 20px;
    padding-inline: 8px;
    border-radius: 10px;
    background-color: var(--cyfer-list-item-hover-background-color);
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}

/* Visible to a screen reader, absent from the layout — the field's label. */
.visually-hidden[b-ls25nhtp2i] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.search-results[b-ls25nhtp2i] {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    z-index: 20;
    inline-size: 100%;
    max-inline-size: 560px;
    max-block-size: 60dvh;
    overflow-y: auto;
    border: 1px solid var(--cyfer-divider-color);
    border-radius: var(--cyfer-radius-medium);
    background-color: var(--cyfer-page-background-color);
    box-shadow: 0 12px 32px var(--cyfer-acrylic-shadow-color);
}

.search-note[b-ls25nhtp2i] {
    margin: 0;
    padding: var(--cyfer-space-small) var(--cyfer-space-medium);
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
}

.search-results ul[b-ls25nhtp2i] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-results button[b-ls25nhtp2i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    inline-size: 100%;
    padding: var(--cyfer-space-small) var(--cyfer-space-medium);
    border: 0;
    background: transparent;
    color: var(--cyfer-page-foreground-color);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .search-results button:hover[b-ls25nhtp2i] {
        background-color: var(--cyfer-list-item-hover-background-color);
    }

    .search-results button:focus-visible[b-ls25nhtp2i] {
        outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
        outline-offset: calc(var(--cyfer-focus-ring-offset) * -1);
    }

.result-chat[b-ls25nhtp2i] {
    font-size: var(--cyfer-font-size-body);
    font-weight: 600;
}

.result-snippet[b-ls25nhtp2i] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-body);
    overflow-wrap: anywhere;
}

.result-when[b-ls25nhtp2i] {
    color: var(--cyfer-dim-text-color);
    font-size: var(--cyfer-font-size-small);
}
/* /Shared/MainNav.razor.rz.scp.css */
/*
    The app rail: a column of sections down the left edge from 600px, a tab bar along the bottom below it.

    🛑 Every rule that styles a link goes through ::deep. The links are NavLink components, whose <a> is
    rendered by NavLink and so never carries this file's scope attribute: a plain `a` selector here styles
    the More link alone and leaves every section link a default, underlined anchor.
*/
nav.main-nav-wrapper[b-cvdehlc3ie] {
    display: flex;
    justify-content: space-between;
    background-color: var(--cyfer-surface-color);
}

.main-nav[b-cvdehlc3ie],
.main-nav-profile[b-cvdehlc3ie] {
    display: flex;
}

.main-nav-links[b-cvdehlc3ie] {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.main-nav-more[b-cvdehlc3ie] {
    display: none;
}

.main-nav-more.show[b-cvdehlc3ie] {
    display: flex;
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    inline-size: 4rem;
    block-size: 3.5rem;
    border-radius: var(--cyfer-radius-medium);
    color: var(--cyfer-dim-text-color);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a span {
    max-inline-size: 100%;
    overflow: hidden;
    font-size: var(--cyfer-font-size-caption);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a .icon {
    font-size: var(--cyfer-font-size-icon-small);
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a:hover {
    background-color: var(--cyfer-list-item-hover-background-color);
    color: var(--cyfer-page-foreground-color);
}

/* NavLink adds `active` on the route being viewed: the item takes the brand colour, filled icon and a
   tinted ground, so where you are reads at a glance in either theme. */
nav.main-nav-wrapper[b-cvdehlc3ie]  a.active {
    background-color: color-mix(in srgb, var(--cyfer-primary-color), transparent 88%);
    color: var(--cyfer-link-color);
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a.active span {
    font-weight: var(--cyfer-font-weight-semibold);
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a.active .icon {
    font-variation-settings: 'FILL' 1;
}

nav.main-nav-wrapper[b-cvdehlc3ie]  a:focus-visible {
    outline: var(--cyfer-focus-ring-width) solid var(--cyfer-focus-ring-color);
    outline-offset: calc(-1 * var(--cyfer-focus-ring-offset));
}

/* The bottom tab bar, below 600px. */
nav.main-nav-wrapper.horizontal[b-cvdehlc3ie] {
    flex-direction: row;
    border-block-start: 1px solid var(--cyfer-divider-color);
    padding-block-end: env(safe-area-inset-bottom);
}

.horizontal .main-nav[b-cvdehlc3ie],
.horizontal .main-nav-links[b-cvdehlc3ie],
.horizontal .main-nav-more[b-cvdehlc3ie],
.horizontal .main-nav-profile[b-cvdehlc3ie] {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    block-size: 4rem;
}

.horizontal .main-nav[b-cvdehlc3ie] {
    overflow: hidden;
    inline-size: 100%;
}

.horizontal .main-nav-links[b-cvdehlc3ie] {
    flex-grow: 1;
}

.horizontal .main-nav-profile[b-cvdehlc3ie] {
    margin-inline-end: var(--cyfer-space-small);
}

/* The rail, from 600px. */
nav.main-nav-wrapper.vertical[b-cvdehlc3ie] {
    flex-direction: column;
    flex: none;
    padding-inline: var(--cyfer-space-xsmall);
}

.vertical .main-nav[b-cvdehlc3ie],
.vertical .main-nav-links[b-cvdehlc3ie],
.vertical .main-nav-more[b-cvdehlc3ie],
.vertical .main-nav-profile[b-cvdehlc3ie] {
    flex-direction: column;
    align-items: center;
    gap: var(--cyfer-space-xsmall);
}

.vertical .main-nav[b-cvdehlc3ie] {
    block-size: 100%;
    padding-block: var(--cyfer-space-small);
}

.vertical .main-nav-spacer[b-cvdehlc3ie] {
    flex-grow: 1;
}

nav.main-nav-wrapper.vertical[b-cvdehlc3ie]  a.active::before {
    content: "";
    position: absolute;
    inset-block: 0.875rem;
    inset-inline-start: calc(-1 * var(--cyfer-space-xsmall));
    inline-size: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background-color: var(--cyfer-primary-color);
}

@media (max-width: 599px) {
    nav.main-nav-wrapper.horizontal[b-cvdehlc3ie] {
        display: flex;
    }

    nav.main-nav-wrapper.vertical[b-cvdehlc3ie] {
        display: none;
    }
}

@media (min-width: 600px) {
    nav.main-nav-wrapper.horizontal[b-cvdehlc3ie] {
        display: none;
    }

    nav.main-nav-wrapper.vertical[b-cvdehlc3ie] {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.main-nav-wrapper[b-cvdehlc3ie]  a {
        transition: none;
    }
}