/* Components/CollaborativeMarkdownView.razor.css.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-m9vct2lw3u] {
    --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-m9vct2lw3u] {
    --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-m9vct2lw3u] {
        --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-m9vct2lw3u] {
    width: 100%;
    padding: 16px 0;
    position: relative;
}

.collab-md-toolbar[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    overflow: hidden;
}

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

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

.collab-md-sidebar[b-m9vct2lw3u] {
    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-m9vct2lw3u] .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-m9vct2lw3u] .annotation-card:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    border-color: var(--neutral-stroke-hover);
}

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

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

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

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

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

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

.collab-md-card-actions button[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    background: var(--neutral-layer-3);
}

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

.collab-md-card-actions .btn-reject[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    color: var(--annotation-delete-border);
}

/* Quoted text snippet */
.collab-md-quote[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    border-left-color: var(--annotation-insert-border);
    background: var(--annotation-insert-bg);
}

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

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-actions button:hover {
    background: var(--neutral-layer-3);
}

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-text {
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .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-m9vct2lw3u] .comment-highlight:hover {
    filter: brightness(0.95);
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-highlight.selected {
    filter: brightness(0.9);
}

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .track-insert:hover {
    filter: brightness(0.95);
}

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .track-delete:hover {
    filter: brightness(0.95);
}

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

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .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-m9vct2lw3u] .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-m9vct2lw3u] .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-m9vct2lw3u] .comment-highlight.show-label .annotation-margin-label,
[b-m9vct2lw3u] .track-insert.show-label .annotation-margin-label,
[b-m9vct2lw3u] .track-delete.show-label .annotation-margin-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 1;
}

/* Popover label colors */
[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-highlight .annotation-margin-label::before {
    border-bottom-color: var(--annotation-comment-label-bg);
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .track-insert .annotation-margin-label::before {
    border-bottom-color: var(--annotation-insert-label-bg);
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .track-delete .annotation-margin-label::before {
    border-bottom-color: var(--annotation-delete-label-bg);
}

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

/* Comment text display */
[b-m9vct2lw3u] .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-m9vct2lw3u] .annotation-comment-text.annotation-no-comment {
    font-style: italic;
    opacity: 0.6;
}

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .annotation-actions button:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u]  .annotation-margin-label {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .annotation-indicator:hover {
    opacity: 1;
}

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

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .annotation-nav-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

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

@keyframes annotation-pulse-b-m9vct2lw3u {
    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-m9vct2lw3u] .comment-highlight.new-annotation {
    animation: annotation-pulse-b-m9vct2lw3u 1.5s ease-out;
}

@keyframes track-change-pulse-insert-b-m9vct2lw3u {
    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-m9vct2lw3u] .track-insert.new-annotation {
    animation: track-change-pulse-insert-b-m9vct2lw3u 1.5s ease-out;
}

@keyframes track-change-pulse-delete-b-m9vct2lw3u {
    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-m9vct2lw3u] .track-delete.new-annotation {
    animation: track-change-pulse-delete-b-m9vct2lw3u 1.5s ease-out;
}

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .comment-selection-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

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

[b-m9vct2lw3u] .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-m9vct2lw3u] h1,
[b-m9vct2lw3u] h2 {
    border-bottom: none;
    font-size: 2em;
    line-height: 1.5;
}

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

/* --- Paragraphs --- */

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

/* --- Lists --- */

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u] .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-m9vct2lw3u] .md-code-cell .code-content {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .md-code-cell .md-code-cell-output .layout-area {
    margin: 0;
    background-color: transparent;
}

[b-m9vct2lw3u] .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-m9vct2lw3u] .copy-to-clipboard {
    cursor: pointer;
    display: inline-block;
    height: 24px;
    border-radius: 3px;
    position: absolute;
    right: 1em;
    top: 1em;
}

[b-m9vct2lw3u] .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-m9vct2lw3u] 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-m9vct2lw3u] table {
    background-color: transparent;
}

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

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

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

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

/* --- Images --- */

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

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

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

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

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

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

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

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

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

[b-m9vct2lw3u] .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-m9vct2lw3u]  code:not(pre code) {
    background-color: #161b22;
    color: #c9d1d9;
    border: 1px solid #30363d;
}

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

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

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

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

.collab-md-content[data-theme="dark"][b-m9vct2lw3u]  .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-m9vct2lw3u]  code:not(pre code) {
        background-color: #161b22;
        color: #c9d1d9;
        border: 1px solid #30363d;
    }

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

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

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

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

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

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

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

.comment-input-overlay[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    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-m9vct2lw3u] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.comment-input-quote[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    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-m9vct2lw3u] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

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

.comment-btn[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

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

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

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

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

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

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

.add-page-comment-btn[b-m9vct2lw3u] {
    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-m9vct2lw3u] {
    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-m9vct2lw3u] .md-cell-editor {
    width: 100%;
    box-sizing: border-box;
}

[b-m9vct2lw3u] .md-code-cell .md-cell-editor {
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

/* Components/CommentableView.razor.css.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-0kppppy0j6] {
    /* Positioning context for the floating button, which is placed over the selection. */
    position: relative;
}

.comment-input-overlay[b-0kppppy0j6] {
    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-0kppppy0j6] {
    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-0kppppy0j6] {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 12px;
}

.comment-input-quote[b-0kppppy0j6] {
    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-0kppppy0j6] {
    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-0kppppy0j6] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

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

.comment-btn[b-0kppppy0j6] {
    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-0kppppy0j6] {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

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

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

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

[b-0kppppy0j6] .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-0kppppy0j6] .comment-selection-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* Components/MarkdownEditorView.razor.css.rz.scp.css */
/* --- Annotation Theme (CSS Custom Properties) --- */

.collaborative-editor-container[b-rspz1kdve1] {
    --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-rspz1kdve1] {
        --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-rspz1kdve1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
}

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

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

.editor-area[b-rspz1kdve1] {
    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-rspz1kdve1] {
    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-rspz1kdve1] {
    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-rspz1kdve1] {
    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-rspz1kdve1] {
    display: flex;
    gap: 4px;
}

.annotations-sidebar-actions button[b-rspz1kdve1] {
    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-rspz1kdve1] {
    background: var(--neutral-layer-3, #e5e5e5);
}

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

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

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

[b-rspz1kdve1] .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-rspz1kdve1] .annotation-card:hover {
    border-color: var(--neutral-stroke-hover, #999);
}

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

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

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

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

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

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

.annotation-author[b-rspz1kdve1] {
    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-rspz1kdve1] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #666);
    white-space: nowrap;
}

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

.annotation-card-actions button[b-rspz1kdve1] {
    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-rspz1kdve1] {
    background: var(--neutral-layer-3, #e5e5e5);
}

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

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

/* Quoted text snippet */
.annotation-quote[b-rspz1kdve1] {
    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-rspz1kdve1] {
    border-left-color: var(--annotation-insert-border, #22863a);
    background: var(--annotation-insert-bg, #dafbe1);
}

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

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

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

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

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

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

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

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

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

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

[b-rspz1kdve1] .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-rspz1kdve1] .monaco-annotation-tag {
    opacity: 0.35 !important;
    font-size: 0.85em !important;
}

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

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

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

/* Gutter icons for Monaco */
[b-rspz1kdve1] .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-rspz1kdve1] .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-rspz1kdve1] .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;
}