/* /Shared/CommentAttachments.razor.rz.scp.css */
/* Document cards under a comment: a file-type icon, the name and size, laid out to
   read like the pending chips in the composer so a sent file looks the same as it did
   before sending. The card is a button — the whole thing is the click target. */
.comment-attachments[b-z2zcayiyi0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.attach-card[b-z2zcayiyi0] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.attach-card:hover:not(:disabled)[b-z2zcayiyi0] {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}
.attach-card:disabled[b-z2zcayiyi0] { cursor: progress; opacity: 0.7; }

.attach-card-icon[b-z2zcayiyi0] { color: var(--mud-palette-primary); flex: 0 0 auto; }
.attach-card-text[b-z2zcayiyi0] { display: flex; flex-direction: column; min-width: 0; }
.attach-card-name[b-z2zcayiyi0] {
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attach-card-size[b-z2zcayiyi0] { font-size: 0.6875rem; color: var(--mud-palette-text-secondary); }
/* /Shared/MarkdownComposer.razor.rz.scp.css */
/* The composer is drawn to read like a MudBlazor outlined text field: a label,
   then a bordered box holding the toolbar and the typing area, so it is obvious
   where to click. The contenteditable's formatting (bold, lists, links, images)
   is native output whose children are created in JS without a scope attribute,
   so they are styled through ::deep. */
.rt-field[b-8rlk0i5ngn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rt-label[b-8rlk0i5ngn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.rt-box[b-8rlk0i5ngn] {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    transition: border-color .15s, box-shadow .15s;
}

/* Mirror the focus ring of a MudBlazor outlined field, without a layout shift. */
.rt-box:focus-within[b-8rlk0i5ngn] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.rt-toolbar[b-8rlk0i5ngn] {
    min-height: 40px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rt-editor[b-8rlk0i5ngn] {
    min-height: var(--rt-min, 104px);
    max-height: 420px;
    overflow-y: auto;
    padding: 10px 12px;
    color: var(--mud-palette-text-primary);
    font: inherit;
    line-height: 1.5;
    outline: none;
    /* An I-beam on hover signals the whole area is a place to type. */
    cursor: text;
}

/* Placeholder while genuinely empty. */
.rt-editor:empty[b-8rlk0i5ngn]::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.rt-editor[b-8rlk0i5ngn]  a { color: var(--mud-palette-info); text-decoration: underline; }
/* A pasted or loaded screenshot shows as a modest preview, not a full-column paste. */
.rt-editor[b-8rlk0i5ngn]  img { max-width: 100%; max-height: 220px; height: auto; border-radius: 4px; margin: 0.3rem 0; }
.rt-editor[b-8rlk0i5ngn]  ul { list-style: disc; padding-left: 1.5rem; margin: 0.3rem 0; }
.rt-editor[b-8rlk0i5ngn]  ol { list-style: decimal; padding-left: 1.5rem; margin: 0.3rem 0; }
.rt-editor[b-8rlk0i5ngn]  p { margin: 0.3rem 0; }

/* The @mention picker: a compact list under the editor while typing "@name". */
.rt-mention-menu[b-8rlk0i5ngn] {
    margin: 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.rt-mention-item[b-8rlk0i5ngn] {
    padding: 4px 12px;
    cursor: pointer;
}
.rt-mention-item:hover[b-8rlk0i5ngn] {
    background: var(--mud-palette-action-default-hover);
}
.rt-mention-item-disabled[b-8rlk0i5ngn] { cursor: not-allowed; opacity: 0.7; }
.rt-mention-item-disabled:hover[b-8rlk0i5ngn] { background: transparent; }
.rt-mention-item-disabled .rt-mention-sub[b-8rlk0i5ngn] { color: var(--mud-palette-warning); }
.rt-mention-name[b-8rlk0i5ngn] { display: block; font-size: 0.875rem; }
.rt-mention-sub[b-8rlk0i5ngn] { display: block; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }

/* While a file is dragged over the box, tint it so it reads as a drop target. */
.rt-editor.rt-dragover[b-8rlk0i5ngn] {
    background: var(--mud-palette-action-default-hover);
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
}

/* Pending attachment chips: the footer row of files dragged in but not yet sent. */
.rt-attachments[b-8rlk0i5ngn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.rt-attach-chip[b-8rlk0i5ngn] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
}
.rt-attach-failed[b-8rlk0i5ngn] { border-color: var(--mud-palette-error); }
.rt-attach-icon[b-8rlk0i5ngn] { color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.rt-attach-failed .rt-attach-icon[b-8rlk0i5ngn] { color: var(--mud-palette-error); }
.rt-attach-text[b-8rlk0i5ngn] { display: flex; flex-direction: column; min-width: 0; }
.rt-attach-name[b-8rlk0i5ngn] {
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-attach-sub[b-8rlk0i5ngn] { font-size: 0.6875rem; color: var(--mud-palette-text-secondary); }
.rt-attach-failed .rt-attach-sub[b-8rlk0i5ngn] { color: var(--mud-palette-error); }
.rt-attach-remove[b-8rlk0i5ngn] { flex: 0 0 auto; }
/* /Shared/MarkdownView.razor.rz.scp.css */
/* MudBlazor's reset strips list markers; restore them inside rendered Markdown.
   ::deep because the content is a MarkupString and carries no scope attribute. */
.markdown-body[b-s2s7f3eglx]  ul { list-style: disc; padding-left: 1.5rem; margin: 0.4rem 0; }
.markdown-body[b-s2s7f3eglx]  ol { list-style: decimal; padding-left: 1.5rem; margin: 0.4rem 0; }
.markdown-body[b-s2s7f3eglx]  li { margin: 0.15rem 0; }
.markdown-body[b-s2s7f3eglx]  p { margin: 0.35rem 0; }
.markdown-body[b-s2s7f3eglx]  p:first-child { margin-top: 0; }
.markdown-body[b-s2s7f3eglx]  p:last-child { margin-bottom: 0; }
/* Links read as links: a clear blue and a visible underline, not the theme's
   brand colour that can blend into body text. */
.markdown-body[b-s2s7f3eglx]  a { color: var(--mud-palette-info); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.markdown-body[b-s2s7f3eglx]  a:hover { text-decoration-thickness: 2px; filter: brightness(1.1); }
.markdown-body[b-s2s7f3eglx]  code { background: var(--mud-palette-background-grey); padding: 0.05rem 0.3rem; border-radius: 3px; font-size: 0.9em; }
.markdown-body[b-s2s7f3eglx]  pre { background: var(--mud-palette-background-grey); padding: 0.6rem; border-radius: 4px; overflow-x: auto; }
.markdown-body[b-s2s7f3eglx]  pre code { background: none; padding: 0; }
.markdown-body[b-s2s7f3eglx]  blockquote { border-left: 3px solid var(--mud-palette-lines-default); padding-left: 0.75rem; margin: 0.4rem 0; color: var(--mud-palette-text-secondary); }
/* Pasted screenshots and other images sit as a modest preview in the thread —
   capped in height rather than filling the column — and open full size on click
   (wired in inline-images.js, which sets the zoom cursor once the blob loads). */
.markdown-body[b-s2s7f3eglx]  img { max-width: 100%; max-height: 320px; height: auto; width: auto; border-radius: 4px; margin: 0.4rem 0; }
/* /Shared/NotificationBell.razor.rz.scp.css */
.notif-panel[b-jcjf7ryrf9] {
    width: 360px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
}

/* Live-connection indicator, left of the bell. */
.notif-bell[b-jcjf7ryrf9] { display: inline-flex; align-items: center; gap: 6px; }
.conn-pill[b-jcjf7ryrf9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.conn-dot[b-jcjf7ryrf9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    flex: 0 0 auto;
}
.conn-live .conn-dot[b-jcjf7ryrf9] { background: var(--mud-palette-success); }
.conn-reconnecting .conn-dot[b-jcjf7ryrf9] { background: var(--mud-palette-warning); animation: conn-pulse-b-jcjf7ryrf9 1s ease-in-out infinite; }
.conn-connecting .conn-dot[b-jcjf7ryrf9] { background: var(--mud-palette-warning); animation: conn-pulse-b-jcjf7ryrf9 1s ease-in-out infinite; }
.conn-offline .conn-dot[b-jcjf7ryrf9] { background: var(--mud-palette-error); }
.conn-label[b-jcjf7ryrf9] { color: var(--mud-palette-text-secondary); }

@keyframes conn-pulse-b-jcjf7ryrf9 { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* On a phone the header is tight — the dot carries the state; drop the text. */
@media (max-width: 600px) {
    .conn-label[b-jcjf7ryrf9] { display: none; }
}

.notif-head[b-jcjf7ryrf9] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
}

.notif-empty[b-jcjf7ryrf9] {
    padding: 20px 12px;
    text-align: center;
}

.notif-item[b-jcjf7ryrf9] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.notif-item:hover[b-jcjf7ryrf9] { background: var(--mud-palette-action-default-hover); }

/* An unread row is tinted and carries a left accent so the eye finds it. */
.notif-unread[b-jcjf7ryrf9] { background: var(--mud-palette-action-default-hover); }
.notif-unread[b-jcjf7ryrf9] { border-left: 3px solid var(--mud-palette-primary); padding-left: 9px; }

.notif-item-icon[b-jcjf7ryrf9] { margin-top: 2px; flex: 0 0 auto; }
.notif-item-body[b-jcjf7ryrf9] { min-width: 0; }
.notif-item-title[b-jcjf7ryrf9] {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
}
.notif-item-preview[b-jcjf7ryrf9] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.notif-item-time[b-jcjf7ryrf9] {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}