/* _content/MeshWeaver.Blazor.Views/Components/CatalogView.razor.rz.scp.css */
.catalog-container[b-uly6bjin1l] {
    width: 100%;
}

.catalog-section[b-uly6bjin1l] {
    width: 100%;
}

.catalog-section-header[b-uly6bjin1l] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.catalog-section-emoji[b-uly6bjin1l] {
    font-size: 1.25rem;
}

.catalog-section-title[b-uly6bjin1l] {
    flex: 1;
}

.catalog-section-count[b-uly6bjin1l] {
    margin-left: auto;
}

.catalog-grid[b-uly6bjin1l] {
    padding: 0;
}

/* Remove default accordion padding and neutralize backgrounds */
[b-uly6bjin1l] fluent-accordion {
    background: transparent;
}

[b-uly6bjin1l] fluent-accordion-item {
    background: transparent;
}

[b-uly6bjin1l] fluent-accordion-item::part(heading) {
    padding: 0;
    background: transparent;
}

[b-uly6bjin1l] fluent-accordion-item::part(region) {
    padding: 4px 0 0 0;
    background: transparent;
}

/* Neutralize FluentGrid background */
[b-uly6bjin1l] fluent-grid {
    background: transparent;
}

/* Ensure grid items stretch to equal height within rows */
[b-uly6bjin1l] fluent-grid-item {
    display: flex;
    align-items: stretch;
}

/* Ensure cards within grid items fill the height */
[b-uly6bjin1l] fluent-grid-item > * {
    width: 100%;
    height: 100%;
}

/* Ensure layout areas fill the card */
[b-uly6bjin1l] .layout-area-container {
    height: 100%;
    width: 100%;
}
/* _content/MeshWeaver.Blazor.Views/Components/CollaborativeMarkdownView.razor.rz.scp.css */
/* ==========================================================================
   CollaborativeMarkdownView — Modern Google Docs / Word-style
   Uses Fluent design tokens (var(--neutral-*)) for theme support.
   All annotation styles use ::deep to target MarkupString HTML content.
   ========================================================================== */

/* --- Annotation Theme (CSS Custom Properties) --- */

.collab-md-container[b-yh546k5yp6] {
    --annotation-comment-bg: #fff8c5;
    --annotation-comment-border: #d4a72c;
    --annotation-comment-dot: #bf8700;
    --annotation-insert-bg: #dafbe1;
    --annotation-insert-border: #22863a;
    --annotation-insert-color: #22863a;
    --annotation-delete-bg: #ffebe9;
    --annotation-delete-border: #cf222e;
    --annotation-delete-color: #cf222e;
    --annotation-delete-text: #656d76;
    --annotation-active-border: #0969da;
    --annotation-active-bg: rgba(9, 105, 218, 0.08);
    --annotation-comment-label-bg: #fffbeb;
    --annotation-comment-label-color: #78350f;
    --annotation-insert-label-bg: #ecfdf5;
    --annotation-insert-label-color: #064e3b;
    --annotation-delete-label-bg: #fef2f2;
    --annotation-delete-label-color: #7f1d1d;
    --annotation-border-separator: rgba(0, 0, 0, 0.1);
}

.collab-md-container[data-theme="dark"][b-yh546k5yp6] {
    --annotation-comment-bg: rgba(187, 128, 9, 0.15);
    --annotation-comment-border: #d29922;
    --annotation-comment-dot: #d29922;
    --annotation-insert-bg: rgba(46, 160, 67, 0.15);
    --annotation-insert-border: #3fb950;
    --annotation-insert-color: #3fb950;
    --annotation-delete-bg: rgba(248, 81, 73, 0.15);
    --annotation-delete-border: #f85149;
    --annotation-delete-color: #f85149;
    --annotation-delete-text: #8b949e;
    --annotation-active-border: #58a6ff;
    --annotation-active-bg: rgba(56, 139, 253, 0.15);
    --annotation-comment-label-bg: #451a03;
    --annotation-comment-label-color: #fef3c7;
    --annotation-insert-label-bg: #064e3b;
    --annotation-insert-label-color: #d1fae5;
    --annotation-delete-label-bg: #7f1d1d;
    --annotation-delete-label-color: #fee2e2;
    --annotation-border-separator: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
    .collab-md-container:not([data-theme="light"])[b-yh546k5yp6] {
        --annotation-comment-bg: rgba(187, 128, 9, 0.15);
        --annotation-comment-border: #d29922;
        --annotation-comment-dot: #d29922;
        --annotation-insert-bg: rgba(46, 160, 67, 0.15);
        --annotation-insert-border: #3fb950;
        --annotation-insert-color: #3fb950;
        --annotation-delete-bg: rgba(248, 81, 73, 0.15);
        --annotation-delete-border: #f85149;
        --annotation-delete-color: #f85149;
        --annotation-delete-text: #8b949e;
        --annotation-active-border: #58a6ff;
        --annotation-active-bg: rgba(56, 139, 253, 0.15);
        --annotation-comment-label-bg: #451a03;
        --annotation-comment-label-color: #fef3c7;
        --annotation-insert-label-bg: #064e3b;
        --annotation-insert-label-color: #d1fae5;
        --annotation-delete-label-bg: #7f1d1d;
        --annotation-delete-label-color: #fee2e2;
        --annotation-border-separator: rgba(255, 255, 255, 0.1);
    }
}

/* --- Container & Layout --- */

.collab-md-container[b-yh546k5yp6] {
    width: 100%;
    padding: 16px 0;
    position: relative;
}

.collab-md-toolbar[b-yh546k5yp6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    flex-wrap: wrap;
}

.collab-md-split[b-yh546k5yp6] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    overflow: hidden;
}

.collab-md-split.with-sidebar .collab-md-content[b-yh546k5yp6] {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(100% - 300px);
}

.collab-md-content[b-yh546k5yp6] {
    flex: 1;
    min-width: 0;
    line-height: 1.7;
    font-size: 1rem;
}

.collab-md-sidebar[b-yh546k5yp6] {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-x: hidden;
}

/* --- Annotation Cards (Google Docs style) --- */

[b-yh546k5yp6] .annotation-card {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: 0.85rem;
    line-height: 1.4;
}

[b-yh546k5yp6] .annotation-card:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    border-color: var(--neutral-stroke-hover);
}

[b-yh546k5yp6] .annotation-card.active {
    border: 2px solid var(--annotation-active-border);
    box-shadow: 0 2px 8px rgba(9, 105, 218, 0.12);
}

[b-yh546k5yp6] .annotation-card.active.annotation-type-insert {
    border-color: var(--annotation-insert-border);
    box-shadow: 0 2px 8px rgba(34, 134, 58, 0.12);
}

[b-yh546k5yp6] .annotation-card.active.annotation-type-delete {
    border-color: var(--annotation-delete-border);
    box-shadow: 0 2px 8px rgba(207, 34, 46, 0.12);
}

/* Card header: author left, buttons right */
.collab-md-card-header[b-yh546k5yp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.collab-md-card-meta[b-yh546k5yp6] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.collab-md-author[b-yh546k5yp6] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collab-md-time[b-yh546k5yp6] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* Inline action buttons — hidden until hover */
.collab-md-card-actions[b-yh546k5yp6] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-yh546k5yp6] .annotation-card:hover .collab-md-card-actions {
    opacity: 1;
}

.collab-md-card-actions button[b-yh546k5yp6] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.collab-md-card-actions button:hover[b-yh546k5yp6] {
    background: var(--neutral-layer-3);
}

.collab-md-card-actions .btn-accept[b-yh546k5yp6] {
    color: var(--annotation-insert-border);
}

.collab-md-card-actions .btn-reject[b-yh546k5yp6] {
    color: var(--annotation-delete-border);
}

/* Revert a history-derived change — the only action on a tracked-change card, since the edit is
   already in the document. */
.collab-md-card-actions .btn-revert[b-yh546k5yp6] {
    color: var(--annotation-delete-border);
}

/* Quoted text snippet */
.collab-md-quote[b-yh546k5yp6] {
    margin-top: 6px;
    padding: 4px 8px;
    border-left: 3px solid;
    border-radius: 0 4px 4px 0;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.collab-md-quote.quote-insert[b-yh546k5yp6] {
    border-left-color: var(--annotation-insert-border);
    background: var(--annotation-insert-bg);
}

.collab-md-quote.quote-delete[b-yh546k5yp6] {
    border-left-color: var(--annotation-delete-border);
    background: var(--annotation-delete-bg);
    text-decoration: line-through;
}

.collab-md-quote.quote-comment[b-yh546k5yp6] {
    border-left-color: var(--annotation-comment-border);
    background: var(--annotation-comment-bg);
}

/* Comment text below the quote */
.collab-md-comment-text[b-yh546k5yp6] {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest);
}

/* Comment card type styling */
[b-yh546k5yp6] .annotation-card.annotation-type-comment {
    border-left: 3px solid var(--annotation-comment-border);
}

[b-yh546k5yp6] .annotation-card.annotation-type-comment.resolved {
    opacity: 0.45;
}

[b-yh546k5yp6] .annotation-card.active.annotation-type-comment {
    border-color: var(--annotation-comment-border);
    box-shadow: 0 2px 8px rgba(212, 167, 44, 0.15);
}

/* --- Comment Card Inline Layout (Google Docs-style) --- */

[b-yh546k5yp6] .comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-yh546k5yp6] .comment-author {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-yh546k5yp6] .comment-time {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

[b-yh546k5yp6] .comment-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-yh546k5yp6] .annotation-card:hover .comment-actions {
    opacity: 1;
}

[b-yh546k5yp6] .comment-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}

[b-yh546k5yp6] .comment-actions button:hover {
    background: var(--neutral-layer-3);
}

[b-yh546k5yp6] .comment-actions .btn-resolve {
    color: #4ade80;
}

[b-yh546k5yp6] .comment-actions .btn-delete {
    color: #f87171;
}

[b-yh546k5yp6] .comment-quote {
    margin-top: 4px;
    padding: 3px 8px;
    border-left: 2px solid var(--annotation-comment-border);
    border-radius: 0 3px 3px 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--neutral-foreground-hint);
    background: var(--annotation-comment-bg);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

[b-yh546k5yp6] .comment-text {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

[b-yh546k5yp6] .comment-placeholder {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ==========================================================================
   Inline Annotation Styles (rendered via MarkupString HTML)
   All use ::deep to target dynamic content as descendants of scoped elements
   ========================================================================== */

/* --- Comment Highlights --- */

[b-yh546k5yp6] .comment-highlight {
    background-color: var(--annotation-comment-bg);
    border-bottom: 2px solid var(--annotation-comment-border);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
    padding: 1px 2px;
    border-radius: 2px;
}

[b-yh546k5yp6] .comment-highlight:hover {
    filter: brightness(0.95);
}

[b-yh546k5yp6] .comment-highlight::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background-color: var(--annotation-comment-dot);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[b-yh546k5yp6] .comment-highlight.selected {
    filter: brightness(0.9);
}

[b-yh546k5yp6] .comment-highlight.resolved {
    background-color: var(--annotation-insert-bg);
    border-bottom-color: var(--annotation-insert-border);
    opacity: 0.7;
}

[b-yh546k5yp6] .comment-highlight.resolved::after {
    background-color: var(--annotation-insert-border);
}

/* --- Track Changes - Insertions --- */

[b-yh546k5yp6] .track-insert {
    background-color: var(--annotation-insert-bg);
    text-decoration: none;
    border-bottom: 2px solid var(--annotation-insert-border);
    padding: 1px 2px;
    border-radius: 2px;
    position: relative;
}

[b-yh546k5yp6] .track-insert:hover {
    filter: brightness(0.95);
}

[b-yh546k5yp6] .track-insert.selected {
    box-shadow: 0 0 0 2px var(--annotation-insert-border);
}

[b-yh546k5yp6] .track-insert.accepted {
    background-color: transparent;
    border-bottom: none;
}

/* --- Track Changes - Deletions --- */

[b-yh546k5yp6] .track-delete {
    background-color: var(--annotation-delete-bg);
    text-decoration: line-through;
    text-decoration-color: var(--annotation-delete-border);
    text-decoration-thickness: 2px;
    color: var(--annotation-delete-text);
    padding: 1px 2px;
    border-radius: 2px;
    position: relative;
}

[b-yh546k5yp6] .track-delete:hover {
    filter: brightness(0.95);
}

[b-yh546k5yp6] .track-delete.selected {
    box-shadow: 0 0 0 2px var(--annotation-delete-border);
}

[b-yh546k5yp6] .track-delete.accepted {
    display: none;
}

[b-yh546k5yp6] .track-delete.rejected {
    text-decoration: none;
    color: inherit;
    background-color: transparent;
}

/* --- Track Changes - Replacements --- */

[b-yh546k5yp6] .track-replace {
    position: relative;
}

[b-yh546k5yp6] .track-replace .old-text {
    background-color: var(--annotation-delete-bg);
    text-decoration: line-through;
    text-decoration-color: var(--annotation-delete-border);
    color: var(--annotation-delete-text);
}

[b-yh546k5yp6] .track-replace .new-text {
    background-color: var(--annotation-insert-bg);
    border-bottom: 2px solid var(--annotation-insert-border);
}

/* ==========================================================================
   Annotation Popover (author/date + accept/reject tooltip)
   ========================================================================== */

[b-yh546k5yp6] .annotation-margin-label {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 180px;
    max-width: 280px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 8px;
    border-left: 4px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[b-yh546k5yp6] .annotation-margin-label::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid;
    border-bottom-color: inherit;
}

/* Show label when parent annotation is clicked/active */
[b-yh546k5yp6] .comment-highlight.show-label .annotation-margin-label,
[b-yh546k5yp6] .track-insert.show-label .annotation-margin-label,
[b-yh546k5yp6] .track-delete.show-label .annotation-margin-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
}

/* Popover label colors */
[b-yh546k5yp6] .comment-highlight .annotation-margin-label {
    background: var(--annotation-comment-label-bg);
    border-left-color: var(--annotation-comment-border);
    color: var(--annotation-comment-label-color);
}

[b-yh546k5yp6] .comment-highlight .annotation-margin-label::before {
    border-bottom-color: var(--annotation-comment-label-bg);
}

[b-yh546k5yp6] .track-insert .annotation-margin-label {
    background: var(--annotation-insert-label-bg);
    border-left-color: var(--annotation-insert-border);
    color: var(--annotation-insert-label-color);
}

[b-yh546k5yp6] .track-insert .annotation-margin-label::before {
    border-bottom-color: var(--annotation-insert-label-bg);
}

[b-yh546k5yp6] .track-delete .annotation-margin-label {
    background: var(--annotation-delete-label-bg);
    border-left-color: var(--annotation-delete-border);
    color: var(--annotation-delete-label-color);
}

[b-yh546k5yp6] .track-delete .annotation-margin-label::before {
    border-bottom-color: var(--annotation-delete-label-bg);
}

/* Annotation metadata header */
[b-yh546k5yp6] .annotation-meta {
    font-weight: 600;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 4px;
}

/* Comment text display */
[b-yh546k5yp6] .annotation-comment-text {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 6px 0;
    border-top: 1px solid var(--annotation-border-separator);
    margin-top: 4px;
    white-space: normal;
    word-wrap: break-word;
}

[b-yh546k5yp6] .annotation-comment-text.annotation-no-comment {
    font-style: italic;
    opacity: 0.6;
}

/* Action buttons inside popover */
[b-yh546k5yp6] .annotation-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--annotation-border-separator);
}

[b-yh546k5yp6] .annotation-actions button {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

[b-yh546k5yp6] .annotation-actions button:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

[b-yh546k5yp6] .annotation-actions button:active {
    transform: translateY(0);
}

[b-yh546k5yp6] .annotation-actions .accept-btn {
    background: var(--annotation-insert-border);
    color: white;
}

[b-yh546k5yp6] .annotation-actions .reject-btn {
    background: var(--annotation-delete-border);
    color: white;
}

[b-yh546k5yp6] .annotation-actions .resolve-btn {
    background: var(--annotation-active-border);
    color: white;
}

[b-yh546k5yp6] .annotation-actions .reply-btn {
    background: var(--neutral-foreground-hint);
    color: white;
}

/* ==========================================================================
   View Mode Toggle Classes
   Applied to .collab-md-container via @ViewModeClass
   ========================================================================== */

/* Hide margin labels */
.annotations-hide-margins[b-yh546k5yp6]  .annotation-margin-label {
    display: none;
}

/* Hide all annotation styling (show clean text) */
.annotations-hide-markup[b-yh546k5yp6]  .comment-highlight,
.annotations-hide-markup[b-yh546k5yp6]  .track-insert {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

.annotations-hide-markup[b-yh546k5yp6]  .comment-highlight::after {
    display: none;
}

.annotations-hide-markup[b-yh546k5yp6]  .track-delete {
    display: none;
}

.annotations-hide-markup[b-yh546k5yp6]  .annotation-margin-label {
    display: none;
}

/* Show accepted view (insertions kept, deletions removed) */
.annotations-accepted-view[b-yh546k5yp6]  .track-delete {
    display: none;
}

.annotations-accepted-view[b-yh546k5yp6]  .track-insert {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.annotations-accepted-view[b-yh546k5yp6]  .comment-highlight {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.annotations-accepted-view[b-yh546k5yp6]  .comment-highlight::after,
.annotations-accepted-view[b-yh546k5yp6]  .annotation-margin-label {
    display: none;
}

/* Show original view (deletions kept, insertions removed) */
.annotations-original-view[b-yh546k5yp6]  .track-insert {
    display: none;
}

.annotations-original-view[b-yh546k5yp6]  .track-delete {
    text-decoration: none !important;
    background: none !important;
    color: inherit !important;
}

.annotations-original-view[b-yh546k5yp6]  .comment-highlight {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.annotations-original-view[b-yh546k5yp6]  .comment-highlight::after,
.annotations-original-view[b-yh546k5yp6]  .annotation-margin-label {
    display: none;
}

/* ==========================================================================
   Annotation Indicators (margin icons)
   ========================================================================== */

[b-yh546k5yp6] .annotation-indicator {
    position: absolute;
    left: -24px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

[b-yh546k5yp6] .annotation-indicator:hover {
    opacity: 1;
}

[b-yh546k5yp6] .annotation-indicator.comment-icon {
    color: var(--annotation-comment-border);
}

[b-yh546k5yp6] .annotation-indicator.insert-icon {
    color: var(--annotation-insert-border);
}

[b-yh546k5yp6] .annotation-indicator.delete-icon {
    color: var(--annotation-delete-border);
}

/* ==========================================================================
   Annotation Navigation
   ========================================================================== */

[b-yh546k5yp6] .annotation-nav {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

[b-yh546k5yp6] .annotation-nav-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent-fill-rest);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[b-yh546k5yp6] .annotation-nav-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[b-yh546k5yp6] .annotation-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   Animations for new annotations
   ========================================================================== */

@keyframes annotation-pulse-b-yh546k5yp6 {
    0% { box-shadow: 0 0 0 0 var(--annotation-comment-border); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

[b-yh546k5yp6] .comment-highlight.new-annotation {
    animation: annotation-pulse-b-yh546k5yp6 1.5s ease-out;
}

@keyframes track-change-pulse-insert-b-yh546k5yp6 {
    0% { box-shadow: 0 0 0 0 var(--annotation-insert-border); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

[b-yh546k5yp6] .track-insert.new-annotation {
    animation: track-change-pulse-insert-b-yh546k5yp6 1.5s ease-out;
}

@keyframes track-change-pulse-delete-b-yh546k5yp6 {
    0% { box-shadow: 0 0 0 0 var(--annotation-delete-border); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

[b-yh546k5yp6] .track-delete.new-annotation {
    animation: track-change-pulse-delete-b-yh546k5yp6 1.5s ease-out;
}

/* Active annotation highlight (applied by JS highlightAnnotation) */
[b-yh546k5yp6] .annotation-active {
    outline: 2px solid var(--annotation-active-border);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Comment-from-Selection Floating Button
   ========================================================================== */

[b-yh546k5yp6] .comment-selection-btn {
    position: absolute;
    z-index: 1000;
    display: none;
    padding: 4px 10px;
    border: 1px solid var(--annotation-comment-border);
    border-radius: 6px;
    background: var(--annotation-comment-label-bg, #fffbeb);
    color: var(--annotation-comment-label-color, #78350f);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

[b-yh546k5yp6] .comment-selection-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* Inline content area styling */
[b-yh546k5yp6] .layout-area {
    margin: 1rem 0;
}

[b-yh546k5yp6] .layout-area-error {
    padding: 1rem;
    background-color: var(--annotation-delete-bg);
    border-left: 4px solid var(--annotation-delete-border);
    border-radius: 4px;
    color: var(--annotation-delete-color);
}

/* ==========================================================================
   Markdown Body Content Styles (github-markdown overrides + Fluent UI tokens)
   These mirror MarkdownView.razor.css so collaborative content is styled
   identically to standalone markdown.
   ========================================================================== */

/* --- Headings --- */

[b-yh546k5yp6] h1,
[b-yh546k5yp6] h2 {
    border-bottom: none;
    font-size: 2em;
    line-height: 1.5;
}

[b-yh546k5yp6] h1:focus,
[b-yh546k5yp6] h2:focus {
    outline: none;
}

/* --- Paragraphs --- */

[b-yh546k5yp6] p {
    margin-bottom: 1.5em;
    font-size: 1em;
    line-height: 1.6;
}

/* --- Lists --- */

[b-yh546k5yp6] ul,
[b-yh546k5yp6] ol {
    margin-bottom: 1.5em;
}

/* --- Code blocks --- */

[b-yh546k5yp6] .code-content {
    position: relative;
    padding-right: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-border-default);
    background-color: var(--neutral-layer-2);
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 1.5em;
}

/* --- Executable code cell (notebook shape: toolbar / code / output in one frame) --- */

[b-yh546k5yp6] .md-code-cell {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    overflow: hidden;
    background: var(--neutral-layer-1);
    margin-bottom: 1.5em;
}

[b-yh546k5yp6] .md-code-cell .code-content {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

[b-yh546k5yp6] .md-code-cell .md-code-cell-output {
    border-top: 1px solid var(--neutral-stroke-rest);
    border-left: 3px solid var(--accent-fill-rest);
    background: var(--neutral-layer-2);
    padding: 10px 12px;
}

[b-yh546k5yp6] .md-code-cell .md-code-cell-output .layout-area {
    margin: 0;
    background-color: transparent;
}

[b-yh546k5yp6] .code-content code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: block;
    padding: 10px;
    background-color: var(--color-canvas-default);
    color: var(--color-fg-default);
    font-size: 1em;
    line-height: 1.5;
}

[b-yh546k5yp6] .copy-to-clipboard {
    cursor: pointer;
    display: inline-block;
    height: 24px;
    border-radius: 3px;
    position: absolute;
    right: 1em;
    top: 1em;
}

[b-yh546k5yp6] .copy-to-clipboard:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23036ac4' d='M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z'%3E%3C/path%3E%3C/svg%3E");
    display: inline-block;
    width: 20px;
    height: 20px;
}

/* --- Inline code (light theme default) --- */

[b-yh546k5yp6] code:not(pre code) {
    background-color: #f6f8fa;
    color: #24292f;
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-size: 85%;
    border: 1px solid #d1d9e0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* --- Tables (Fluent UI tokens) --- */

[b-yh546k5yp6] table {
    background-color: transparent;
}

[b-yh546k5yp6] table tr {
    background-color: var(--neutral-layer-1);
    border-top-color: var(--neutral-stroke-rest, #d1d9e0);
}

[b-yh546k5yp6] table tr:nth-child(2n) {
    background-color: var(--neutral-layer-2);
}

[b-yh546k5yp6] table td,
[b-yh546k5yp6] table th {
    border-color: var(--neutral-stroke-rest, #d1d9e0);
}

[b-yh546k5yp6] table th {
    background-color: var(--neutral-layer-2);
}

/* --- Images --- */

[b-yh546k5yp6] img {
    background-color: transparent;
}

/* --- Mermaid diagrams --- */

[b-yh546k5yp6] .mermaid {
    background-color: transparent;
}

[b-yh546k5yp6] .mermaid svg {
    background-color: transparent;
}

/* --- SVG theme container --- */

[b-yh546k5yp6] .svg-theme-container {
    overflow-x: auto !important;
    overflow-y: visible;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

[b-yh546k5yp6] .svg-theme-container svg {
    max-width: 100%;
    height: auto;
}

[b-yh546k5yp6] .svg-theme-container::-webkit-scrollbar {
    height: 6px;
}

[b-yh546k5yp6] .svg-theme-container::-webkit-scrollbar-thumb {
    background-color: #c6c6c6;
    border-radius: 3px;
}

[b-yh546k5yp6] .svg-theme-container .svg-dark {
    display: none;
}

/* ==========================================================================
   Dark Theme Overrides (explicit data-theme + system preference fallback)
   ========================================================================== */

/* Inline code — dark (explicit) */
.collab-md-content[data-theme="dark"][b-yh546k5yp6]  code:not(pre code) {
    background-color: #161b22;
    color: #c9d1d9;
    border: 1px solid #30363d;
}

/* Tables — dark (explicit) */
.collab-md-content[data-theme="dark"][b-yh546k5yp6]  table tr {
    background-color: var(--neutral-layer-1);
}

.collab-md-content[data-theme="dark"][b-yh546k5yp6]  table tr:nth-child(2n) {
    background-color: var(--neutral-layer-2);
}

.collab-md-content[data-theme="dark"][b-yh546k5yp6]  table th {
    background-color: var(--neutral-layer-2);
}

/* SVG theme switching — dark (explicit) */
.collab-md-content[data-theme="dark"][b-yh546k5yp6]  .svg-theme-container .svg-light {
    display: none;
}

.collab-md-content[data-theme="dark"][b-yh546k5yp6]  .svg-theme-container .svg-dark {
    display: block;
}

/* System preference fallback (for data-theme="system") */
@media (prefers-color-scheme: dark) {
    .collab-md-content:not([data-theme="light"])[b-yh546k5yp6]  code:not(pre code) {
        background-color: #161b22;
        color: #c9d1d9;
        border: 1px solid #30363d;
    }

    .collab-md-content:not([data-theme="light"])[b-yh546k5yp6]  .svg-theme-container .svg-light {
        display: none;
    }

    .collab-md-content:not([data-theme="light"])[b-yh546k5yp6]  .svg-theme-container .svg-dark {
        display: block;
    }
}

/* ==========================================================================
   Responsive: collapse sidebar on narrow screens
   ========================================================================== */

@media (max-width: 768px) {
    .collab-md-split[b-yh546k5yp6] {
        flex-direction: column;
    }

    .collab-md-split.with-sidebar .collab-md-content[b-yh546k5yp6] {
        max-width: 100%;
    }

    .collab-md-sidebar[b-yh546k5yp6] {
        flex: none;
        width: 100%;
        max-width: 100%;
        max-height: none;
        position: static;
    }
}

/* ==========================================================================
   Comment Input Dialog (text selection comment)
   ========================================================================== */

.comment-input-overlay[b-yh546k5yp6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.comment-input-dialog[b-yh546k5yp6] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.comment-input-header[b-yh546k5yp6] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.comment-input-quote[b-yh546k5yp6] {
    padding: 8px 12px;
    background: var(--annotation-comment-bg);
    border-left: 3px solid var(--annotation-comment-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 12px;
    font-style: italic;
}

.comment-input-textarea[b-yh546k5yp6] {
    width: 100%;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    outline: none;
    box-sizing: border-box;
}

.comment-input-textarea:focus[b-yh546k5yp6] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.comment-input-actions[b-yh546k5yp6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.comment-btn[b-yh546k5yp6] {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--neutral-stroke-rest);
    transition: background-color 0.15s ease;
}

.comment-btn-cancel[b-yh546k5yp6] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.comment-btn-cancel:hover[b-yh546k5yp6] {
    background: var(--neutral-layer-3);
}

.comment-btn-submit[b-yh546k5yp6] {
    background: var(--accent-fill-rest);
    color: white;
    border-color: var(--accent-fill-rest);
}

.comment-btn-submit:hover[b-yh546k5yp6] {
    background: var(--accent-fill-hover);
}

/* ==========================================================================
   Page Comment Section (bottom of page)
   ========================================================================== */

.page-comment-section[b-yh546k5yp6] {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.page-comment-form[b-yh546k5yp6] {
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.add-page-comment-btn[b-yh546k5yp6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 8px;
    background: transparent;
    color: var(--accent-fill-rest);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.add-page-comment-btn:hover[b-yh546k5yp6] {
    background: var(--neutral-layer-2);
    border-color: var(--accent-fill-rest);
}

/* The EDITABLE code segment (#1636). MarkdownCodeCellEditor REPLACES the server's `code-content`
   marker div for a viewer holding Update, exactly as MarkdownCodeCellToolbar replaces the toolbar
   marker — so the hydrated DOM carries `md-cell-editor`, NOT `code-content`, and anything selecting
   the cell's code in a live Blazor page (e2e, styling) must look for this class. The `md-code-cell`
   frame around it is untouched server HTML and still identifies a workbench. */
[b-yh546k5yp6] .md-cell-editor {
    width: 100%;
    box-sizing: border-box;
}

[b-yh546k5yp6] .md-code-cell .md-cell-editor {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}
/* _content/MeshWeaver.Blazor.Views/Components/CommentableView.razor.rz.scp.css */
/* Select-to-comment for any wrapped content. The dialog and floating-button rules are the same
   ones CollaborativeMarkdownView uses, so the affordance looks identical wherever it appears —
   a reader should not be able to tell that a post and a doc page use different views. */

.commentable-wrapper[b-j3t5fhhgfh] {
    /* Positioning context for the floating button, which is placed over the selection. */
    position: relative;
}

.comment-input-overlay[b-j3t5fhhgfh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.comment-input-dialog[b-j3t5fhhgfh] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px;
    width: 420px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.comment-input-header[b-j3t5fhhgfh] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.comment-input-quote[b-j3t5fhhgfh] {
    padding: 8px 12px;
    background: var(--annotation-comment-bg);
    border-left: 3px solid var(--annotation-comment-border);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    margin-bottom: 12px;
    font-style: italic;
}

.comment-input-textarea[b-j3t5fhhgfh] {
    width: 100%;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    outline: none;
    box-sizing: border-box;
}

.comment-input-textarea:focus[b-j3t5fhhgfh] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.comment-input-actions[b-j3t5fhhgfh] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.comment-btn[b-j3t5fhhgfh] {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--neutral-stroke-rest);
    transition: background-color 0.15s ease;
}

.comment-btn-cancel[b-j3t5fhhgfh] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

.comment-btn-cancel:hover[b-j3t5fhhgfh] {
    background: var(--neutral-layer-3);
}

.comment-btn-submit[b-j3t5fhhgfh] {
    background: var(--accent-fill-rest);
    color: white;
    border-color: var(--accent-fill-rest);
}

.comment-btn-submit:hover[b-j3t5fhhgfh] {
    background: var(--accent-fill-hover);
}

[b-j3t5fhhgfh] .comment-selection-btn {
    position: absolute;
    z-index: 1000;
    display: none;
    padding: 4px 10px;
    border: 1px solid var(--annotation-comment-border);
    border-radius: 6px;
    background: var(--annotation-comment-label-bg, #fffbeb);
    color: var(--annotation-comment-label-color, #78350f);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

[b-j3t5fhhgfh] .comment-selection-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}
/* _content/MeshWeaver.Blazor.Views/Components/DataGridView.razor.rz.scp.css */
.data-grid[b-71vqkbgr5k] {

}

.paginator[b-71vqkbgr5k]{

}
/* _content/MeshWeaver.Blazor.Views/Components/DocumentSourceView.razor.rz.scp.css */
.mw-docsource[b-xqd98keng7] {
    display: block;
    width: 100%;
    overflow: auto;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 16px;
}

.mw-docsource-loading[b-xqd98keng7] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
    padding: 24px;
    text-align: center;
}

/* Content below is injected by the JS module, so it must be reached with ::deep (no scope attribute). */

.mw-docsource[b-xqd98keng7]  .mw-docsource-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mw-docsource[b-xqd98keng7]  .mw-pdf-page {
    position: relative;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    background: #fff;
}

.mw-docsource[b-xqd98keng7]  .mw-pdf-page canvas {
    display: block;
}

/* PDF.js text layer: transparent text over the canvas so selection + highlight align with glyphs. */
.mw-docsource[b-xqd98keng7]  .mw-pdf-textlayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    color: transparent;
}

.mw-docsource[b-xqd98keng7]  .mw-pdf-textlayer span {
    position: absolute;
    white-space: pre;
    transform-origin: 0 0;
    color: transparent;
}

.mw-docsource[b-xqd98keng7]  .mw-docx-body {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 6px;
}

/* The matched passage — visible over the canvas image (PDF) and inline (DOCX). */
.mw-docsource[b-xqd98keng7]  .mw-docmark {
    background-color: var(--accent-fill-rest, #ffd54f);
    color: inherit;
    border-radius: 2px;
}

.mw-docsource[b-xqd98keng7]  .mw-docsource-fallback {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mw-docsource[b-xqd98keng7]  .mw-docsource-note {
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.mw-docsource[b-xqd98keng7]  .mw-docsource-download {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.mw-docsource[b-xqd98keng7]  .mw-docsource-passage {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--neutral-layer-1);
    border-left: 3px solid var(--accent-fill-rest);
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* _content/MeshWeaver.Blazor.Views/Components/HighlightView.razor.rz.scp.css */
.mw-highlight[b-v3h6hul2po] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Search-match passages. Themed via design tokens so it reads in light + dark. */
.mw-highlight-mark[b-v3h6hul2po] {
    background-color: var(--accent-fill-rest, #ffd54f);
    color: var(--accent-foreground-cut-rest, inherit);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
}
/* _content/MeshWeaver.Blazor.Views/Components/LayoutAreaDefinitionView.razor.rz.scp.css */

.layout-grid[b-hxnpjwggow] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.layout-area-card[b-hxnpjwggow] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    background: var(--neutral-fill-rest);
    transition: all 0.3s ease;
    cursor: pointer;
    height: auto;
    min-height: 100px;
    max-height: 240px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    width: 100%;
}

    .layout-area-card:hover[b-hxnpjwggow] {
        border-color: var(--accent-fill-rest);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        text-decoration: none !important;
        transform: translateY(-2px);
    }

.layout-area-card-header[b-hxnpjwggow] {
    padding: 16px 20px 8px 20px;
    border-bottom: 1px solid var(--neutral-stroke-subtle);
    background: var(--neutral-fill-subtle);
    flex-shrink: 0;
}

.layout-area-card-title[b-hxnpjwggow] {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none !important;
}

.layout-area-card-content[b-hxnpjwggow] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 20px 20px 20px;
    flex: 1;
    min-height: 0;
}

.layout-area-card-image[b-hxnpjwggow] {
    width: 140px;
    height: 79px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--neutral-fill-secondary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.layout-area-card-text[b-hxnpjwggow] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.layout-area-card-description[b-hxnpjwggow] {
    margin: 0;
    font-size: 0.95em;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    text-decoration: none !important;
}
/* _content/MeshWeaver.Blazor.Views/Components/LayoutStackView.razor.rz.scp.css */
/* _content/MeshWeaver.Blazor.Views/Components/LoginButton.razor.rz.scp.css */
/* Enhanced styling for the existing login/logout buttons */

/* Common styles for both buttons */
.btn[b-dum3xoohkw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

/* Primary button (Login) */
.btn-primary[b-dum3xoohkw] {
    background-color: var(--accent-fill-rest, #0078d4);
    color: white;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-primary:hover[b-dum3xoohkw] {
        background-color: var(--accent-fill-hover, #106ebe);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-primary:active[b-dum3xoohkw] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Link button (Logout) */
.btn-link[b-dum3xoohkw] {
    background-color: var(--accent-fill-rest, #0078d4);
    color: white;
    border: none;
    padding: 8px 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .btn-link:hover[b-dum3xoohkw] {
        background-color: var(--accent-fill-hover, #106ebe);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .btn-link:active[b-dum3xoohkw] {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Icon styling */
.oi[b-dum3xoohkw] {
    font-size: 16px;
    vertical-align: -2px;
}

/* Username styling in logout button */
.btn-link span:last-child[b-dum3xoohkw] {
    max-width: 120px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
/* _content/MeshWeaver.Blazor.Views/Components/MarkdownEditorView.razor.rz.scp.css */
/* --- Annotation Theme (CSS Custom Properties) --- */

.collaborative-editor-container[b-7rvi0tu5u6] {
    --annotation-comment-bg: #fff8c5;
    --annotation-comment-border: #d4a72c;
    --annotation-comment-dot: #bf8700;
    --annotation-insert-bg: #dafbe1;
    --annotation-insert-border: #22863a;
    --annotation-insert-color: #22863a;
    --annotation-delete-bg: #ffebe9;
    --annotation-delete-border: #cf222e;
    --annotation-delete-color: #cf222e;
    --annotation-delete-text: #656d76;
    --annotation-active-border: #0969da;
    --annotation-active-bg: rgba(9, 105, 218, 0.08);
    --annotation-border-separator: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    .collaborative-editor-container[b-7rvi0tu5u6] {
        --annotation-comment-bg: rgba(187, 128, 9, 0.15);
        --annotation-comment-border: #d29922;
        --annotation-comment-dot: #d29922;
        --annotation-insert-bg: rgba(46, 160, 67, 0.15);
        --annotation-insert-border: #3fb950;
        --annotation-insert-color: #3fb950;
        --annotation-delete-bg: rgba(248, 81, 73, 0.15);
        --annotation-delete-border: #f85149;
        --annotation-delete-color: #f85149;
        --annotation-delete-text: #8b949e;
        --annotation-active-border: #58a6ff;
        --annotation-active-bg: rgba(56, 139, 253, 0.15);
        --annotation-border-separator: rgba(255, 255, 255, 0.1);
    }
}

/* --- Container & Layout --- */

.collaborative-editor-container[b-7rvi0tu5u6] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.editor-main-content[b-7rvi0tu5u6] {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 0;
    gap: 0;
}

.editor-main-content.with-panel[b-7rvi0tu5u6] {
    gap: 16px;
}

.editor-area[b-7rvi0tu5u6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Suggest Mode Indicator Stripe
   ========================================================================== */

.suggest-mode-stripe[b-7rvi0tu5u6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--annotation-insert-bg, #dafbe1);
    border-left: 3px solid var(--annotation-insert-border, #22863a);
    color: var(--annotation-insert-color, #22863a);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* ==========================================================================
   Annotations Sidebar
   ========================================================================== */

.annotations-sidebar[b-7rvi0tu5u6] {
    flex: 0 0 280px;
    min-width: 240px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    border-left: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    padding: 8px;
}

.annotations-sidebar-header[b-7rvi0tu5u6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint, #666);
}

.annotations-sidebar-actions[b-7rvi0tu5u6] {
    display: flex;
    gap: 4px;
}

.annotations-sidebar-actions button[b-7rvi0tu5u6] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.annotations-sidebar-actions button:hover[b-7rvi0tu5u6] {
    background: var(--neutral-layer-3, #e5e5e5);
}

.annotations-sidebar-actions .btn-accept-all[b-7rvi0tu5u6] {
    color: var(--annotation-insert-border, #22863a);
}

.annotations-sidebar-actions .btn-reject-all[b-7rvi0tu5u6] {
    color: var(--annotation-delete-border, #cf222e);
}

/* --- Annotation Cards --- */

[b-7rvi0tu5u6] .annotation-card {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    background: var(--neutral-layer-1, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-size: 0.85rem;
    line-height: 1.4;
}

[b-7rvi0tu5u6] .annotation-card:hover {
    border-color: var(--neutral-stroke-hover, #999);
}

[b-7rvi0tu5u6] .annotation-card.active {
    border: 2px solid var(--annotation-active-border, #0969da);
    background: var(--annotation-active-bg, rgba(9, 105, 218, 0.08));
}

[b-7rvi0tu5u6] .annotation-card.annotation-type-comment {
    border-left: 3px solid var(--annotation-comment-border, #d4a72c);
}

[b-7rvi0tu5u6] .annotation-card.annotation-type-insert {
    border-left: 3px solid var(--annotation-insert-border, #22863a);
}

[b-7rvi0tu5u6] .annotation-card.annotation-type-delete {
    border-left: 3px solid var(--annotation-delete-border, #cf222e);
}

.annotation-card-header[b-7rvi0tu5u6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.annotation-card-meta[b-7rvi0tu5u6] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.annotation-author[b-7rvi0tu5u6] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.annotation-type-label[b-7rvi0tu5u6] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #666);
    white-space: nowrap;
}

.annotation-card-actions[b-7rvi0tu5u6] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.annotation-card-actions button[b-7rvi0tu5u6] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.annotation-card-actions button:hover[b-7rvi0tu5u6] {
    background: var(--neutral-layer-3, #e5e5e5);
}

.annotation-card-actions .btn-accept[b-7rvi0tu5u6],
.annotation-card-actions .btn-resolve[b-7rvi0tu5u6] {
    color: var(--annotation-insert-border, #22863a);
}

.annotation-card-actions .btn-reject[b-7rvi0tu5u6] {
    color: var(--annotation-delete-border, #cf222e);
}

/* Quoted text snippet */
.annotation-quote[b-7rvi0tu5u6] {
    margin-top: 4px;
    padding: 3px 6px;
    border-left: 3px solid;
    border-radius: 4px;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--neutral-foreground-hint, #666);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.annotation-quote.quote-insert[b-7rvi0tu5u6] {
    border-left-color: var(--annotation-insert-border, #22863a);
    background: var(--annotation-insert-bg, #dafbe1);
}

.annotation-quote.quote-delete[b-7rvi0tu5u6] {
    border-left-color: var(--annotation-delete-border, #cf222e);
    background: var(--annotation-delete-bg, #ffebe9);
    text-decoration: line-through;
}

.annotation-quote.quote-comment[b-7rvi0tu5u6] {
    border-left-color: var(--annotation-comment-border, #d4a72c);
    background: var(--annotation-comment-bg, #fff8c5);
}

/* Comment text below the quote */
.annotation-comment-text[b-7rvi0tu5u6] {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--neutral-foreground-rest, #333);
}

/* ==========================================================================
   Preview Panel
   ========================================================================== */

.preview-panel[b-7rvi0tu5u6] {
    width: 400px;
    flex-shrink: 0;
    border-left: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.preview-header[b-7rvi0tu5u6] {
    padding: 8px 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    background: var(--neutral-layer-2, #f5f5f5);
}

.preview-content[b-7rvi0tu5u6] {
    flex: 1;
    padding: 16px;
    overflow: auto;
}

/* ==========================================================================
   Monaco Editor Annotation Decoration Styles
   ========================================================================== */

[b-7rvi0tu5u6] .monaco-comment-decoration {
    background-color: var(--annotation-comment-bg) !important;
    border-bottom: 2px solid var(--annotation-comment-border) !important;
}

[b-7rvi0tu5u6] .monaco-insert-decoration {
    background-color: var(--annotation-insert-bg) !important;
    border-bottom: 2px solid var(--annotation-insert-border) !important;
}

[b-7rvi0tu5u6] .monaco-delete-decoration {
    background-color: var(--annotation-delete-bg) !important;
    text-decoration: line-through !important;
}

/* Annotation tag markers (dim XML tags so content stands out) */
[b-7rvi0tu5u6] .monaco-annotation-tag {
    opacity: 0.35 !important;
    font-size: 0.85em !important;
}

[b-7rvi0tu5u6] .monaco-insert-tag {
    color: var(--annotation-insert-color) !important;
}

[b-7rvi0tu5u6] .monaco-delete-tag {
    color: var(--annotation-delete-color) !important;
}

[b-7rvi0tu5u6] .monaco-comment-tag {
    color: var(--annotation-comment-border) !important;
}

/* Gutter icons for Monaco */
[b-7rvi0tu5u6] .monaco-comment-glyph {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23bf8700' d='M8 1a7 7 0 0 0-7 7c0 2.4 1.2 4.5 3 5.8V15l2.2-1.5c.6.2 1.2.3 1.8.3a7 7 0 0 0 0-14z'/%3E%3C/svg%3E") center center no-repeat;
    background-size: 14px;
}

[b-7rvi0tu5u6] .monaco-insert-glyph {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%2322863a'/%3E%3Cpath fill='white' d='M7 4v3H4v2h3v3h2V9h3V7H9V4z'/%3E%3C/svg%3E") center center no-repeat;
    background-size: 14px;
}

[b-7rvi0tu5u6] .monaco-delete-glyph {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23cf222e'/%3E%3Cpath fill='white' d='M4 7v2h8V7z'/%3E%3C/svg%3E") center center no-repeat;
    background-size: 14px;
}
/* _content/MeshWeaver.Blazor.Views/Components/MenuItemView.razor.rz.scp.css */
/* Style menu item links inside the dropdown */
[b-qrouye6v5g] .dropdown-menu .menu-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

[b-qrouye6v5g] .dropdown-menu .menu-item-link:hover {
    background-color: var(--neutral-fill-stealth-hover);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
}

[b-qrouye6v5g] .dropdown-menu .menu-item-link:active {
    background-color: var(--neutral-fill-stealth-active);
}

[b-qrouye6v5g] .dropdown-menu .menu-item-link.active {
    background-color: var(--neutral-fill-stealth-hover);
    color: var(--accent-foreground-rest);
    font-weight: 600;
}
/* _content/MeshWeaver.Blazor.Views/Components/MeshSearchView.razor.rz.scp.css */
.mesh-search-container[b-u8y6xf0lgf] {
    width: 100%;
}

/* ----- Scope tabs: one shared search bar across scopes ----- */
.mesh-search-scopes[b-u8y6xf0lgf] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    margin-bottom: 12px;
    overflow-x: auto;
}

.mesh-search-scope[b-u8y6xf0lgf] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.mesh-search-scope:hover[b-u8y6xf0lgf] {
    color: var(--accent-fill-rest, #0078d4);
}

.mesh-search-scope-active[b-u8y6xf0lgf] {
    border-bottom-color: var(--accent-fill-rest, #0078d4);
    color: var(--accent-fill-rest, #0078d4);
    font-weight: 600;
}

/* ----- Header: search box + view-options bar share ONE row on desktop, wrap when narrow ----- */
.mesh-search-header[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mesh-search-header .mesh-search-box[b-u8y6xf0lgf] {
    flex: 1 1 320px;
    min-width: 240px;
    width: auto;
    margin-bottom: 12px;
}

.mesh-search-header .mesh-search-viewbar[b-u8y6xf0lgf] {
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 12px;
}

/* The search input is DESKTOP-only: under the mobile breakpoint the input, Search button and
   query-gear hide (the chrome search covers mobile), while title/create/view-options stay. */
@media (max-width: 640px) {
    .mesh-search-mobile-hide[b-u8y6xf0lgf] {
        display: none !important;
    }

    .mesh-search-header .mesh-search-box[b-u8y6xf0lgf] {
        flex: 0 1 auto;
        min-width: 0;
    }
}

.mesh-search-box[b-u8y6xf0lgf] {
    margin-bottom: 16px;
    width: 100%;
}

/* ----- Icons mode: the phone-home grid (rounded icon, label beneath) ----- */
.mesh-search-icons-grid[b-u8y6xf0lgf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 16px 8px;
    width: 100%;
    padding: 8px 0;
}

.mesh-search-icon-tile[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.mesh-search-icon-tile:hover[b-u8y6xf0lgf] {
    background: var(--neutral-fill-hover, rgba(128, 128, 128, 0.08));
}

.mesh-search-icon-box[b-u8y6xf0lgf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-fill-rest, rgba(128, 128, 128, 0.08));
    border: 1px solid var(--neutral-stroke-rest, rgba(128, 128, 128, 0.2));
    overflow: hidden;
    flex-shrink: 0;
}

.mesh-search-icon-box img[b-u8y6xf0lgf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.mesh-search-icon-box svg[b-u8y6xf0lgf] {
    width: 36px;
    height: 36px;
}

.mesh-search-icon-emoji[b-u8y6xf0lgf] {
    font-size: 34px;
    line-height: 1;
}

.mesh-search-icon-initial[b-u8y6xf0lgf] {
    font-size: 26px;
    font-weight: 600;
    opacity: 0.7;
}

.mesh-search-icon-label[b-u8y6xf0lgf] {
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.mesh-search-box-inner[b-u8y6xf0lgf] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.mesh-search-title[b-u8y6xf0lgf] {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.mesh-search-box-input[b-u8y6xf0lgf] {
    flex: 1;
}

.mesh-search-button[b-u8y6xf0lgf] {
    padding: 8px 16px;
    background: var(--accent-fill-rest, #0078d4);
    color: var(--foreground-on-accent-rest, white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    height: 38px;
}

.mesh-search-create-button[b-u8y6xf0lgf] {
    background: var(--accent-fill-rest, #0078d4);
    color: var(--foreground-on-accent-rest, white);
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    height: 38px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.mesh-search-create-button:hover[b-u8y6xf0lgf] {
    background: var(--accent-fill-hover, #106ebe);
}

.mesh-search-options-button[b-u8y6xf0lgf] {
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    padding: 0 8px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--neutral-foreground-rest);
    opacity: 0.6;
}

.mesh-search-options-button:hover[b-u8y6xf0lgf] {
    opacity: 1;
    background: var(--neutral-fill-hover, #f0f0f0);
}

/* ----- Discreet view-options bar (group-by combobox + display menu) ----- */
.mesh-search-viewbar[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 28px;
}

.mesh-search-viewbar-spacer[b-u8y6xf0lgf] {
    flex: 1;
}

.mesh-search-viewbar-field[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mesh-search-viewbar-label[b-u8y6xf0lgf] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #666);
}

.mesh-search-groupby[b-u8y6xf0lgf],
.mesh-search-sortby[b-u8y6xf0lgf] {
    font-size: 13px;
    padding: 3px 24px 3px 8px;
    height: 28px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.mesh-search-groupby:hover[b-u8y6xf0lgf],
.mesh-search-sortby:hover[b-u8y6xf0lgf] {
    border-color: var(--accent-fill-rest, #0078d4);
}

.mesh-search-viewbar-menu-wrap[b-u8y6xf0lgf] {
    position: relative;
}

.mesh-search-viewbar-menu-btn[b-u8y6xf0lgf] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    opacity: 0.6;
}

.mesh-search-viewbar-menu-btn:hover[b-u8y6xf0lgf] {
    opacity: 1;
    background: var(--neutral-fill-hover, #f0f0f0);
    border-color: var(--neutral-stroke-rest, #d1d1d1);
}

.mesh-search-viewbar-menu[b-u8y6xf0lgf] {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 20;
    min-width: 160px;
    padding: 6px;
    background: var(--neutral-layer-1, #fff);
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesh-search-viewbar-toggle[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.mesh-search-viewbar-toggle:hover[b-u8y6xf0lgf] {
    background: var(--neutral-fill-hover, #f0f0f0);
}

.mesh-search-viewbar-toggle input[b-u8y6xf0lgf] {
    cursor: pointer;
}

.mesh-search-options-panel[b-u8y6xf0lgf] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
}

.mesh-search-options-header[b-u8y6xf0lgf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-hint, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mesh-search-options-close[b-u8y6xf0lgf] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--neutral-foreground-hint, #666);
    padding: 0 4px;
}

.mesh-search-options-query[b-u8y6xf0lgf] {
    width: 100%;
    font-family: monospace;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    resize: vertical;
    box-sizing: border-box;
}

.mesh-search-options-actions[b-u8y6xf0lgf] {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.mesh-search-results[b-u8y6xf0lgf] {
    width: 100%;
}

.mesh-search-section[b-u8y6xf0lgf] {
    margin-bottom: 24px;
}

.mesh-search-section-header[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 14px;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    margin-bottom: 8px;
}

.mesh-search-collapse-icon[b-u8y6xf0lgf] {
    transition: transform 0.2s;
    transform: rotate(0deg);
}

.mesh-search-collapse-icon.expanded[b-u8y6xf0lgf] {
    transform: rotate(90deg);
}

.mesh-search-section-label[b-u8y6xf0lgf] {
    font-weight: 600;
    font-size: 1.1rem;
}

.mesh-search-section-title[b-u8y6xf0lgf] {
    margin: 24px 0 12px 0;
}

.mesh-search-grid-wrapper[b-u8y6xf0lgf] {
    width: 100%;
}

.mesh-search-show-more[b-u8y6xf0lgf] {
    margin-top: 16px;
    padding-top: 8px;
}

.mesh-search-show-more a[b-u8y6xf0lgf] {
    color: var(--accent-fill-rest);
    text-decoration: none;
    font-weight: 500;
}

.mesh-search-toggle-rows[b-u8y6xf0lgf] {
    background: none;
    border: none;
    color: var(--accent-foreground-rest);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
}

.mesh-search-toggle-rows:hover[b-u8y6xf0lgf] {
    text-decoration: underline;
}

.mesh-search-card[b-u8y6xf0lgf] {
    width: 100%;
    cursor: pointer;
    min-width: 200px;
}

.mesh-search-card:hover[b-u8y6xf0lgf] {
    box-shadow: var(--elevation-shadow-card-active);
}

.mesh-search-card-selected[b-u8y6xf0lgf] {
    outline: 2px solid var(--accent-fill-rest, #0078d4);
    outline-offset: -2px;
}

.mesh-search-card-content[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px;
    min-height: 60px;
    height: 76px;
}

.mesh-search-card-image[b-u8y6xf0lgf] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}


.mesh-search-card-placeholder[b-u8y6xf0lgf] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 8px;
    background: var(--accent-fill-rest, #0078d4);
    color: var(--foreground-on-accent-rest, white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.mesh-search-card-text[b-u8y6xf0lgf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mesh-search-card-title[b-u8y6xf0lgf] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-search-card-description[b-u8y6xf0lgf] {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #666);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}


/* CSS grid for all card layouts — container-responsive via auto-FIT: each card has a fixed
   ~220px min width and the row fits as many as fit (e.g. 4 @ ~960px, 6 @ ~1400px, 8 @ ~1850px),
   the 1fr absorbing the remainder so cards stay uniform width. auto-fit (not auto-fill) collapses
   empty trailing tracks, so when there are only a FEW items they stretch to fill the whole row
   instead of leaving empty space on the right. Fewer per row as the container narrows; never
   different sizes (every track is 1fr). */
.mesh-search-area-grid[b-u8y6xf0lgf] {
    display: grid;
    gap: 8px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Ensure cards stretch to equal height within rows */
.mesh-search-area-grid > *[b-u8y6xf0lgf] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.mesh-search-area-grid > * > *[b-u8y6xf0lgf] {
    width: 100%;
}

/* Empty state with create prompt */
.mesh-search-empty-create[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #d1d1d1);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    color: var(--neutral-foreground-hint, #666);
}

.mesh-search-empty-create:hover[b-u8y6xf0lgf] {
    border-color: var(--accent-fill-rest, #0078d4);
    background: var(--neutral-layer-2);
    transform: translateY(-1px);
}

.mesh-search-empty-icon[b-u8y6xf0lgf] {
    margin-bottom: 12px;
    transition: transform 0.2s;
}

.mesh-search-empty-create:hover .mesh-search-empty-icon[b-u8y6xf0lgf] {
    transform: scale(1.1);
}

.mesh-search-empty-title[b-u8y6xf0lgf] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.mesh-search-empty-hint[b-u8y6xf0lgf] {
    font-size: 0.85rem;
}

/* Card wrapper hosting the absolute "Drill down" affordance (top-right).
   display:flex + column makes the IN-FLOW card (the <a> for a default fluent-card, OR the
   LayoutAreaView host for an ItemArea card like the pinned/thumbnail cards) a flex item, so the
   GLOBAL `.mesh-search-area-grid > * > * { flex:1 1 auto }` rule (standard-page-layout.css) can
   actually stretch it to the full equal-width cell. Without flex here that rule was inert and
   ItemArea cards (pinned / My Items / Latest Threads) rendered at content width — unequal. The
   absolutely-positioned affordances (drill-down / delete) are out of flow, so they are NOT flex
   items and are never stretched. */
.mesh-search-card-wrap[b-u8y6xf0lgf] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Secondary "Drill down" / "Search this node" affordance — subtle until hover. */
.mesh-search-drilldown[b-u8y6xf0lgf] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--neutral-foreground-hint, #888);
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.04));
    border: 1px solid transparent;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}

.mesh-search-card-wrap:hover .mesh-search-drilldown[b-u8y6xf0lgf],
.mesh-search-drilldown:focus-visible[b-u8y6xf0lgf] {
    opacity: 1;
}

.mesh-search-drilldown:hover[b-u8y6xf0lgf] {
    color: var(--accent-foreground-rest, #0078d4);
    background: var(--neutral-layer-1, #fff);
    border-color: var(--neutral-stroke-rest, #d1d1d1);
}

/* Keyboard focus on the result list — the highlight lives on the card, so suppress the
   browser's default focus ring on the container itself. */
.mesh-search-results:focus[b-u8y6xf0lgf],
.mesh-search-results:focus-visible[b-u8y6xf0lgf] {
    outline: none;
}

/* Delete affordance — trash overlay on the card icon (top-left), mirroring the drill affordance
   on the right. Subtle until card hover / keyboard selection; the inline confirm stays visible. */
.mesh-search-delete[b-u8y6xf0lgf],
.mesh-search-delete-confirm[b-u8y6xf0lgf] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mesh-search-delete[b-u8y6xf0lgf] {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.04));
    color: var(--neutral-foreground-hint, #888);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}

.mesh-search-card-wrap:hover .mesh-search-delete[b-u8y6xf0lgf],
.mesh-search-card-selected .mesh-search-delete[b-u8y6xf0lgf],
.mesh-search-delete:focus-visible[b-u8y6xf0lgf] {
    opacity: 1;
}

.mesh-search-delete:hover[b-u8y6xf0lgf] {
    color: var(--error, #d32f2f);
    background: var(--neutral-layer-1, #fff);
    border-color: var(--error, #d32f2f);
}

/* Two-step confirm pair (check / dismiss) — always visible while armed. */
.mesh-search-delete-confirm[b-u8y6xf0lgf] {
    gap: 4px;
    opacity: 1;
}

.mesh-search-delete-confirm button[b-u8y6xf0lgf] {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    background: var(--neutral-layer-1, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mesh-search-delete-yes[b-u8y6xf0lgf] {
    color: var(--error, #d32f2f);
    border-color: var(--error, #d32f2f) !important;
}

.mesh-search-delete-no[b-u8y6xf0lgf] {
    color: var(--neutral-foreground-hint, #666);
}

/* Modern folder TILE for namespace sub-folders (browse mode). The outer element
   only positions the secondary drill-down anchor; the link is the clickable body. */
.mesh-search-folder-tile[b-u8y6xf0lgf] {
    position: relative;
    width: 100%;
}

.mesh-search-folder-tile-link[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    min-height: 60px;
    border-radius: 10px;
    background: var(--neutral-layer-1, #fff);
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s, background 0.15s;
}

.mesh-search-folder-tile-link:hover[b-u8y6xf0lgf] {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: var(--elevation-shadow-card-active);
    transform: translateY(-1px);
    background: var(--neutral-layer-2, #fafafa);
}

.mesh-search-folder-tile-icon[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest, #f0f0f0);
    color: var(--accent-foreground-rest, #0078d4);
    flex-shrink: 0;
}

.mesh-search-folder-tile-text[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.mesh-search-folder-tile-name[b-u8y6xf0lgf] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-search-folder-tile-count[b-u8y6xf0lgf] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--neutral-fill-secondary-rest, #e8e8e8);
    color: var(--neutral-foreground-hint, #666);
    flex-shrink: 0;
}

/* The drill-down anchor sitting on a folder tile reveals on tile hover. */
.mesh-search-folder-tile:hover .mesh-search-folder-drilldown[b-u8y6xf0lgf],
.mesh-search-folder-drilldown:focus-visible[b-u8y6xf0lgf] {
    opacity: 1;
}

/* Namespace tree (MeshSearchRenderMode.NamespaceTree) */
.mesh-search-tree-section[b-u8y6xf0lgf] {
    margin-bottom: 12px;
}

.mesh-search-tree-folder-glyph[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    color: var(--accent-foreground-rest, #0078d4);
}

.mesh-search-tree-count[b-u8y6xf0lgf] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--neutral-fill-secondary-rest, #e8e8e8);
    color: var(--neutral-foreground-hint, #666);
}

.mesh-search-tree-open[b-u8y6xf0lgf] {
    margin-left: auto;
    color: var(--neutral-foreground-hint, #666);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.mesh-search-section-header:hover .mesh-search-tree-open[b-u8y6xf0lgf] {
    opacity: 1;
}

.mesh-search-tree-open:hover[b-u8y6xf0lgf] {
    color: var(--accent-foreground-rest, #0078d4);
}

.mesh-search-tree-children[b-u8y6xf0lgf] {
    margin: 4px 0 8px 11px;
    padding: 4px 0 4px 16px;
    border-left: 2px solid var(--neutral-stroke-rest, #e0e0e0);
}

.mesh-search-tree-empty[b-u8y6xf0lgf] {
    color: var(--neutral-foreground-hint, #888);
    font-size: 0.85rem;
    font-style: italic;
    padding: 4px 0;
}

.mesh-search-tree-loading[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    max-width: 480px;
}

/* ===== Graph navigator (MeshSearchRenderMode.GraphNavigator) ===== */
.mesh-nav[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Above: ancestor breadcrumb rail (root-most → current). */
.mesh-nav-rail[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.03));
    font-size: 0.9rem;
}

.mesh-nav-crumb[b-u8y6xf0lgf] {
    color: var(--accent-foreground-rest, #0078d4);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.mesh-nav-crumb:hover[b-u8y6xf0lgf] {
    background: var(--neutral-layer-1, #fff);
}

.mesh-nav-crumb-current[b-u8y6xf0lgf] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    cursor: default;
}

.mesh-nav-sep[b-u8y6xf0lgf] {
    color: var(--neutral-foreground-hint, #999);
    user-select: none;
}

.mesh-nav-open[b-u8y6xf0lgf] {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    color: var(--neutral-foreground-hint, #888);
    text-decoration: none;
    padding: 2px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity 0.15s, color 0.15s;
}

.mesh-nav-open:hover[b-u8y6xf0lgf] {
    opacity: 1;
    color: var(--accent-foreground-rest, #0078d4);
}

/* Include-documents toggle (node Search area only). */
.mesh-nav-doctoggle[b-u8y6xf0lgf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, #777);
    cursor: pointer;
    user-select: none;
    width: fit-content;
}

.mesh-nav-doctoggle input[b-u8y6xf0lgf] {
    cursor: pointer;
    margin: 0;
}

/* A section (Nodes on top, Namespaces at the bottom). */
.mesh-nav-section[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mesh-nav-section-label[b-u8y6xf0lgf] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint, #777);
}

.mesh-nav-empty[b-u8y6xf0lgf] {
    padding: 24px 0;
}

/* TOP: a node card. The body opens the node; a drill symbol (containers only) re-roots here.
   flex column (same reason as .mesh-search-card-wrap) so the in-flow card stretches to the full
   equal-width cell via the global fill rule, while the absolute drill affordance stays put. */
.mesh-nav-card-wrap[b-u8y6xf0lgf] {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.mesh-nav-card-link[b-u8y6xf0lgf] {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mesh-nav-card-link:hover[b-u8y6xf0lgf] {
    transform: translateY(-1px);
    box-shadow: var(--elevation-shadow-card-active);
}

/* "Drill in" symbol on a node that also contains content — reuses .mesh-search-drilldown base. */
.mesh-nav-card-wrap:hover .mesh-nav-card-drill[b-u8y6xf0lgf],
.mesh-nav-card-drill:focus-visible[b-u8y6xf0lgf] {
    opacity: 1;
}

/* BOTTOM: sub-namespaces as drill-down LINKS — deliberately NOT card-styled, to read as "navigate".
   Responsive grid that caps at 3 columns: 1 on narrow, 2 on medium, 3 on wide (each column ≥240px,
   and ≥1/3 width so it never exceeds three). Same column-capping trick as the node card grid. */
.mesh-nav-namespaces[b-u8y6xf0lgf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(33.333% - 6px, 240px), 1fr));
    gap: 4px 8px;
    width: 100%;
}

.mesh-nav-namespace[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.mesh-nav-namespace:hover[b-u8y6xf0lgf] {
    background: var(--neutral-layer-2, rgba(0, 0, 0, 0.04));
    border-color: var(--neutral-stroke-rest, #e0e0e0);
}

.mesh-nav-namespace-icon[b-u8y6xf0lgf] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-foreground-rest, #0078d4);
    flex-shrink: 0;
}

.mesh-nav-namespace-name[b-u8y6xf0lgf] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-nav-namespace-count[b-u8y6xf0lgf] {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--neutral-fill-secondary-rest, #e8e8e8);
    color: var(--neutral-foreground-hint, #666);
    flex-shrink: 0;
}

.mesh-nav-namespace-chevron[b-u8y6xf0lgf] {
    color: var(--neutral-foreground-hint, #999);
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Skeleton loading placeholders */
.mesh-search-skeleton-avatar[b-u8y6xf0lgf] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest, #e0e0e0);
    animation: skeleton-pulse-b-u8y6xf0lgf 1.5s ease-in-out infinite;
}

.mesh-search-skeleton-line[b-u8y6xf0lgf] {
    height: 12px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #e0e0e0);
    animation: skeleton-pulse-b-u8y6xf0lgf 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-u8y6xf0lgf {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── List mode: one result per row (icon · title · description) ── */

.mesh-search-list[b-u8y6xf0lgf] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mesh-search-row[b-u8y6xf0lgf] {
    position: relative;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.mesh-search-row-selected[b-u8y6xf0lgf] {
    background: var(--neutral-fill-secondary-rest);
}

.mesh-search-row-link[b-u8y6xf0lgf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.mesh-search-row-link:hover[b-u8y6xf0lgf] {
    background: var(--neutral-fill-stealth-hover);
}

.mesh-search-row-icon[b-u8y6xf0lgf] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--neutral-fill-secondary-rest);
}

.mesh-search-row-icon img[b-u8y6xf0lgf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mesh-search-row-icon[b-u8y6xf0lgf]  svg {
    width: 22px;
    height: 22px;
}

.mesh-search-row-emoji[b-u8y6xf0lgf] {
    font-size: 22px;
}

.mesh-search-row-initial[b-u8y6xf0lgf] {
    font-weight: 600;
    color: var(--accent-foreground-rest);
}

.mesh-search-row-text[b-u8y6xf0lgf] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mesh-search-row-title[b-u8y6xf0lgf] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mesh-search-row-desc[b-u8y6xf0lgf] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mesh-search-row-desc-empty[b-u8y6xf0lgf] {
    font-style: italic;
    opacity: 0.75;
}
/* _content/MeshWeaver.Blazor.Views/Components/Monaco/NotebookCellView.razor.rz.scp.css */
.notebook-cell[b-cxpz74umh1] {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    border-radius: 4px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--neutral-layer-1, #ffffff);
}

.notebook-cell:hover[b-cxpz74umh1] {
    border-color: var(--neutral-stroke-hover, #c0c0c0);
}

.notebook-cell.selected[b-cxpz74umh1] {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}

.notebook-cell:focus[b-cxpz74umh1] {
    outline: none;
    border-color: var(--accent-fill-rest, #0078d4);
}

.notebook-cell.markdown[b-cxpz74umh1] {
    border-left: 3px solid var(--neutral-stroke-rest, #6e6e6e);
}

.notebook-cell.code[b-cxpz74umh1] {
    border-left: 3px solid var(--accent-fill-rest, #0078d4);
}

.cell-gutter[b-cxpz74umh1] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 50px;
    min-width: 50px;
    padding: 8px 4px;
    background: var(--neutral-layer-2, #f5f5f5);
    border-right: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    font-family: var(--font-family-monospace, 'Consolas', 'Monaco', monospace);
    font-size: 12px;
    color: var(--neutral-foreground-hint, #767676);
}

.cell-index[b-cxpz74umh1] {
    display: inline-block;
    min-width: 24px;
    text-align: center;
}

.cell-content[b-cxpz74umh1] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cell-toolbar[b-cxpz74umh1] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--neutral-layer-2, #f5f5f5);
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.cell-editor[b-cxpz74umh1] {
    flex: 1;
    min-height: 60px;
}

.cell-output[b-cxpz74umh1] {
    padding: 8px 12px;
    background: var(--neutral-layer-2, #f8f8f8);
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    overflow: auto;
    max-height: 400px;
}

.cell-output.success[b-cxpz74umh1] {
    border-left: 3px solid var(--success, #107c10);
}

.cell-output.error[b-cxpz74umh1] {
    border-left: 3px solid var(--error, #d13438);
    background: var(--error-background, #fef0f0);
}

.output-error[b-cxpz74umh1] {
    color: var(--error, #d13438);
    font-family: var(--font-family-monospace, 'Consolas', 'Monaco', monospace);
    font-size: 13px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.output-stdout[b-cxpz74umh1] {
    color: var(--neutral-foreground-rest, #333333);
    font-family: var(--font-family-monospace, 'Consolas', 'Monaco', monospace);
    font-size: 13px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.output-value[b-cxpz74umh1] {
    font-family: var(--font-family-monospace, 'Consolas', 'Monaco', monospace);
    font-size: 13px;
}

.output-value pre[b-cxpz74umh1] {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Dark mode support */
[data-theme="dark"] .notebook-cell[b-cxpz74umh1],
.dark .notebook-cell[b-cxpz74umh1],
.fluent-dark .notebook-cell[b-cxpz74umh1] {
    background: var(--neutral-layer-1, #1e1e1e);
    border-color: var(--neutral-stroke-rest, #3c3c3c);
}

[data-theme="dark"] .notebook-cell:hover[b-cxpz74umh1],
.dark .notebook-cell:hover[b-cxpz74umh1],
.fluent-dark .notebook-cell:hover[b-cxpz74umh1] {
    border-color: var(--neutral-stroke-hover, #5c5c5c);
}

[data-theme="dark"] .cell-gutter[b-cxpz74umh1],
.dark .cell-gutter[b-cxpz74umh1],
.fluent-dark .cell-gutter[b-cxpz74umh1] {
    background: var(--neutral-layer-2, #252525);
    border-right-color: var(--neutral-stroke-rest, #3c3c3c);
}

[data-theme="dark"] .cell-toolbar[b-cxpz74umh1],
.dark .cell-toolbar[b-cxpz74umh1],
.fluent-dark .cell-toolbar[b-cxpz74umh1] {
    background: var(--neutral-layer-2, #252525);
    border-bottom-color: var(--neutral-stroke-rest, #3c3c3c);
}

[data-theme="dark"] .cell-output[b-cxpz74umh1],
.dark .cell-output[b-cxpz74umh1],
.fluent-dark .cell-output[b-cxpz74umh1] {
    background: var(--neutral-layer-2, #252525);
    border-top-color: var(--neutral-stroke-rest, #3c3c3c);
}

[data-theme="dark"] .cell-output.error[b-cxpz74umh1],
.dark .cell-output.error[b-cxpz74umh1],
.fluent-dark .cell-output.error[b-cxpz74umh1] {
    background: var(--error-background, #3d1f1f);
}

[data-theme="dark"] .output-stdout[b-cxpz74umh1],
.dark .output-stdout[b-cxpz74umh1],
.fluent-dark .output-stdout[b-cxpz74umh1] {
    color: var(--neutral-foreground-rest, #d4d4d4);
}

@media (prefers-color-scheme: dark) {
    .notebook-cell[b-cxpz74umh1] {
        background: var(--neutral-layer-1, #1e1e1e);
        border-color: var(--neutral-stroke-rest, #3c3c3c);
    }

    .cell-gutter[b-cxpz74umh1] {
        background: var(--neutral-layer-2, #252525);
    }

    .cell-toolbar[b-cxpz74umh1] {
        background: var(--neutral-layer-2, #252525);
    }

    .cell-output[b-cxpz74umh1] {
        background: var(--neutral-layer-2, #252525);
    }
}
/* _content/MeshWeaver.Blazor.Views/Components/Monaco/NotebookEditorView.razor.rz.scp.css */
.notebook-editor[b-0qqhbn6k6s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--neutral-layer-1, #ffffff);
}

.notebook-toolbar[b-0qqhbn6k6s] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neutral-layer-2, #f5f5f5);
    border-bottom: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    flex-shrink: 0;
}

.notebook-cells[b-0qqhbn6k6s] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.notebook-empty[b-0qqhbn6k6s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint, #767676);
}

.notebook-empty p[b-0qqhbn6k6s] {
    margin-bottom: 16px;
    font-size: 14px;
}

/* Dark mode support */
[data-theme="dark"] .notebook-editor[b-0qqhbn6k6s],
.dark .notebook-editor[b-0qqhbn6k6s],
.fluent-dark .notebook-editor[b-0qqhbn6k6s] {
    background: var(--neutral-layer-1, #1e1e1e);
}

[data-theme="dark"] .notebook-toolbar[b-0qqhbn6k6s],
.dark .notebook-toolbar[b-0qqhbn6k6s],
.fluent-dark .notebook-toolbar[b-0qqhbn6k6s] {
    background: var(--neutral-layer-2, #252525);
    border-bottom-color: var(--neutral-stroke-rest, #3c3c3c);
}

[data-theme="dark"] .notebook-empty[b-0qqhbn6k6s],
.dark .notebook-empty[b-0qqhbn6k6s],
.fluent-dark .notebook-empty[b-0qqhbn6k6s] {
    color: var(--neutral-foreground-hint, #9a9a9a);
}

@media (prefers-color-scheme: dark) {
    .notebook-editor[b-0qqhbn6k6s] {
        background: var(--neutral-layer-1, #1e1e1e);
    }

    .notebook-toolbar[b-0qqhbn6k6s] {
        background: var(--neutral-layer-2, #252525);
        border-bottom-color: var(--neutral-stroke-rest, #3c3c3c);
    }
}
/* _content/MeshWeaver.Blazor.Views/Components/NavGroup.razor.rz.scp.css */
/* Group header — same metrics as .mw-nav-link (NavLink.razor.css); duplicated here because
   scoped CSS cannot share rules across components. Keep the two in step. */
.mw-nav-group-header[b-gfqg2yuj1i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
}

    .mw-nav-group-header:hover[b-gfqg2yuj1i] {
        background-color: var(--neutral-fill-stealth-hover);
        color: var(--neutral-foreground-rest);
    }

/* Heading-with-url variant: the label is a LINK, the chevron a separate toggle beside it. */
.mw-nav-group-split[b-gfqg2yuj1i] {
    display: flex;
    align-items: stretch;
}

    .mw-nav-group-split .mw-nav-group-title[b-gfqg2yuj1i] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mw-nav-group-split .mw-nav-group-expander[b-gfqg2yuj1i] {
        flex: 0 0 auto;
        width: 28px;
        justify-content: center;
        padding: 5px 4px;
    }

.mw-nav-icon[b-gfqg2yuj1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.mw-nav-label[b-gfqg2yuj1i] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The expander glyph: always rendered, rotating to show state — a collapsed group visibly
   offers its chevron instead of disappearing into a plain text line. */
.mw-nav-chevron[b-gfqg2yuj1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
    transition: transform 0.12s ease;
}

    .mw-nav-chevron.expanded[b-gfqg2yuj1i] {
        transform: rotate(90deg);
    }

/* Children indent under their group, along a tree guide that runs down from the heading's icon —
   the line is what makes three levels readable at a glance instead of a wall of rows. */
.mw-nav-group-items[b-gfqg2yuj1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 19px;
    padding-left: 6px;
    border-left: 1px solid var(--neutral-stroke-divider-rest, rgba(128, 128, 128, 0.25));
}
/* _content/MeshWeaver.Blazor.Views/Components/NavLink.razor.rz.scp.css */
/* The rail link — our own markup (no FluentNavLink), so every icon form renders and the label
   truncates against the REAL remaining width instead of a hard-coded reserve. Colors are Fluent
   design tokens, so the link follows the portal theme in both directions. */
.mw-nav-link[b-ztn6v5030s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 4px;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    position: relative;
}

    .mw-nav-link:hover[b-ztn6v5030s] {
        background-color: var(--neutral-fill-stealth-hover);
        color: var(--neutral-foreground-rest);
    }

    /* The current entry: accent bar + background + weight — none of it colour-only. */
    .mw-nav-link.active[b-ztn6v5030s] {
        background-color: var(--neutral-fill-stealth-hover);
        color: var(--accent-foreground-rest);
        font-weight: 600;
    }

        .mw-nav-link.active[b-ztn6v5030s]::before {
            content: "";
            position: absolute;
            width: 3px;
            height: 60%;
            top: 20%;
            left: 0;
            background-color: var(--accent-fill-rest);
            border-radius: 2px;
        }

.mw-nav-icon[b-ztn6v5030s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.mw-nav-label[b-ztn6v5030s] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/MeshWeaver.Blazor.Views/Components/NavMenuView.razor.rz.scp.css */
/* Fill the parent (e.g. a Splitter pane) and let the menu list scroll
   internally instead of clipping when there are many items. */
.navmenu[b-tkhvnrz287] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The collapsible rail variant (docs / course indexes). Both states carry a fixed inline width
   (see RootStyle), so the transition animates between two known widths instead of a content jump. */
.navmenu.rail[b-tkhvnrz287] {
    overflow: hidden;
    transition: width 0.15s ease, min-width 0.15s ease;
    /* The edge the rail collapses toward — without it the tree floats unanchored in the page. */
    border-right: 1px solid var(--neutral-stroke-divider-rest, rgba(128, 128, 128, 0.25));
}

/* The collapse/expand control. Expanded it sits top-right of the rail, at the seam it collapses
   toward; collapsed it IS the rail — centered in the slim strip, visibly clickable. */
.navmenu-toggle[b-tkhvnrz287] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 6px 6px 0 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-end;
    /* Hint-colored at rest so the control doesn't compete with the index itself. */
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
}

    .navmenu-toggle:hover[b-tkhvnrz287] {
        background-color: var(--neutral-fill-stealth-hover);
    }

.rail-collapsed .navmenu-toggle[b-tkhvnrz287] {
    align-self: center;
    /* The expanded state's right margin would push the centered button 3px off-center
       in the 44px strip. */
    margin: 6px 0 0 0;
}

/* The item list: NavLink / NavGroup components stack vertically and scroll internally. */
.sitenav[b-tkhvnrz287] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px 8px 8px 8px;
    gap: 2px;
}
/* _content/MeshWeaver.Blazor.Views/Components/ThreadMessageBubbleView.razor.rz.scp.css */
/* Dedicated styles for ThreadMessageBubbleView. The bulk of the bubble's CSS
   lives in the .razor's <style> block (pre-existing; will migrate here over
   time). NEW styles MUST land here. Scope identifier is auto-attached by the
   Blazor build to the component's root <div class="thread-msg-bubble">. */

/* Summary chip shown above the verbose markdown body on assistant messages.
   Populated atomically with ThreadMessageStatus.Completed; delegating parents
   read the same value via the Thread.Summary stream. */
.thread-msg-summary[b-wsg4nbxdid] {
    margin: 0 0 10px 0;
    padding: 8px 12px;
    border-left: 3px solid color-mix(in srgb, var(--accent-fill-rest) 60%, transparent);
    background: color-mix(in srgb, var(--accent-fill-rest) 5%, transparent);
    border-radius: 6px;
    font-size: 0.92em;
    line-height: 1.45;
    color: color-mix(in srgb, var(--neutral-foreground-rest) 92%, transparent);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.thread-msg-summary-icon[b-wsg4nbxdid] {
    flex: 0 0 auto;
    color: var(--accent-fill-rest);
    font-style: italic;
    font-weight: 600;
    line-height: 1.45;
}

.thread-msg-summary-text[b-wsg4nbxdid] {
    flex: 1 1 auto;
}