#comments-popup {
    display: none;
    position: fixed;
    right: 2em;
    /* top: 10em; */
    z-index: var(--layer-modal);
    width: 420px;
    height: 640px;
    max-height: 80vh;
    min-width: 200px;
    min-height: 200px;
    background: var(--surface-bg);
    border: var(--border-1) solid var(--color-active);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-3),
                0 0 6px color-mix(in srgb, var(--color-active) 25%, transparent),
                0 0 14px color-mix(in srgb, var(--color-active) 12%, transparent);
    padding: 1em;
    flex-direction: column;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease,
                right 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease,
                box-shadow 0.25s ease, padding 0.25s ease;
    max-width: calc(100vw - 0.5em) !important;
    overscroll-behavior: contain;
    overflow: hidden;
}

body.chat-fullscreen {
    overflow: hidden;
}

#comments-popup[data-fullscreen="true"] {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    border: none;
    z-index: 9999;
    box-sizing: border-box;
    padding: 0.5em;
}

.comments-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    padding-bottom: var(--space-1);
}

.comments-popup-header h3 {
    margin: 0;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Chat navigation back/forward buttons */
.chat-nav-buttons {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    position: relative;
}

.chat-nav-btn {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-1);
    transition: opacity 0.15s var(--ease-out-2), background-color 0.15s var(--ease-out-2);
}

.chat-nav-btn:hover:not(:disabled) {
    background-color: var(--surface-hover);
}

.chat-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.chat-nav-icon {
    width: var(--space-px-4);
    height: var(--space-px-4);
    stroke: currentColor;
    fill: none;
}

/* Recent chats dropdown */
.chat-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-section);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-3);
    z-index: var(--layer-modal);
    padding: var(--space-1) 0;
}

.chat-nav-dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    font-size: var(--text-1);
    color: var(--color-text);
    line-height: 1.4;
}

.chat-nav-dropdown-item:hover {
    background-color: var(--surface-hover);
}

.chat-nav-dropdown-item.current {
    font-weight: var(--weight-7);
}

.chat-nav-dropdown-label {
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-3);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-nav-dropdown-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: var(--text-2);
    padding: var(--space-1) var(--space-2);
    line-height: 1;
    transition: color 0.15s var(--ease-out-2);
}

.chat-nav-dropdown-remove:hover {
    color: var(--color-text);
}

.comments-popup-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.comments-popup-action {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    line-height: 1;
}

.comments-popup-action-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

#comments-popup .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -5px;
    z-index: 1001;
}

#comments-popup .resize-handle-left {
    left: -5px;
    cursor: nwse-resize;
}

#comments-popup .resize-handle-right {
    right: -5px;
    cursor: nesw-resize;
}

#comments-list {
    padding-top: 0.5em;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* height: 380px; */
    flex-grow: 1;
    /* align to vertical bottom */
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom,
            color-mix(in srgb, var(--color-border), transparent 60%) 0%,
            transparent 100%);
    border-radius: 10px;
}

.comment-item:first-child {
    border-top: none;
}

.comment-topics-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5em;
    padding: var(--space-1) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    min-height: 36px; /* Prevent height collapse during scroll */
}

.comment-topics-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

#comments-list::before {
    content: '';
    margin-top: auto;
    /* This pushes content to the bottom when there's few items, 
       but collapses when content overflows, preserving scroll behavior. 
    */
}

#new-comment-form {
    margin-top: auto;
}

#new-comment-form textarea {
    width: 96%;
    resize: none;
    font-size: var(--text-1);
    overflow-y: auto;
    min-height: calc(var(--text-1) * 1.5 * 2); /* 2 lines minimum */
    max-height: calc(var(--text-1) * 1.5 * 10); /* 10 lines maximum */
    transition: height 0.1s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
    /* Prevent iOS zoom on focus */
}

#new-comment-form.creative-drop-hover textarea {
    border-color: var(--link);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 25%, transparent);
}

#new-comment-form button[type="submit"] {
    float: right;
}

#new-comment-form #cancel-edit-btn {
    float: right;
    margin-right: 0.5em;
}


.comment-item {
    border-top: 1px solid var(--color-border);
    padding: 0.5em 1.8em 1.5em 0.5em;
    position: relative;
}

.comment-item.selected-for-move {
    background-color: var(--color-section-bg);
    border-color: var(--color-border);
    -webkit-user-select: none;
    user-select: none;
}

.comment-select {
    position: absolute;
    top: 0.4em;
    right: 0.2em;
}

.comment-select-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.comment-content {
    margin-top: 0.2em;
}

.comment-content pre {
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-content pre code {
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-quoted-block {
    margin-top: 0.3em;
    margin-bottom: 0.2em;
}

.comment-quoted-text,
.comment-content blockquote {
    border-left: 3px solid var(--color-border);
    padding: 0.2em 0.6em;
    margin: 0 0 0.3em 0;
    color: var(--color-muted);
    font-size: 0.9em;
    background: color-mix(in srgb, var(--color-section-bg) 50%, transparent);
    border-radius: 0 4px 4px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-content blockquote p {
    margin: 0;
}

/* Quote indicator in form */
.comment-quote-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3em 0.6em;
    margin-bottom: 0.3em;
    background: color-mix(in srgb, var(--color-section-bg) 50%, transparent);
    border-left: 3px solid var(--color-active);
    border-radius: 0 4px 4px 0;
    font-size: 0.85em;
    color: var(--color-muted);
}

.comment-quote-indicator-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.comment-quote-cancel {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1.1em;
    padding: 0 0.2em;
    line-height: 1;
    flex-shrink: 0;
}

.comment-quote-cancel:hover {
    color: var(--color-text);
}

/* Review quote chips */
.review-quotes-container {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 0.4em 0.5em;
    max-height: 8em;
    overflow-y: auto;
}

.review-quote-chip {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.5em;
    background: color-mix(in srgb, var(--color-section-bg) 50%, transparent);
    border-left: 3px solid var(--color-muted);
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
    font-size: var(--text-0);
    color: var(--color-muted);
    line-height: 1.3;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.review-quote-chip--active {
    border-left-color: var(--color-active);
    background: color-mix(in srgb, var(--color-active) 8%, transparent);
}

.review-quote-type-toggle {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 0.85em;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.review-quote-type-toggle:hover {
    opacity: 1;
}

.review-quote-chip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.review-quote-chip-text:hover {
    color: var(--color-text);
}

.review-quote-chip-feedback {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85em;
    color: var(--color-text);
    opacity: 0.7;
}

.review-quote-chip-remove {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1em;
    padding: 0 0.15em;
    line-height: 1;
    flex-shrink: 0;
}

.review-quote-chip-remove:hover {
    color: var(--color-danger);
}

.review-submit-btn {
    font-size: var(--text-0) !important;
    white-space: nowrap;
}

.comment-highlight {
    background: color-mix(in srgb, var(--color-active) 15%, transparent) !important;
    transition: background 0.3s ease;
}

/* Review popup (uses common-popup) */
.comment-review-popup {
    min-width: auto;
}

.comment-review-popup .common-popup-item {
    padding: 0.3em 0.8em;
    font-size: 0.85em;
    cursor: pointer;
    border-radius: var(--radius-2);
    white-space: nowrap;
}

.comment-reactions {
    margin-top: 0.4em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    position: relative;
    min-height: 26px;
    /* Reserve space for one row of reactions */
}

.comment-reaction-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

.comment-reaction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    border: 1px solid var(--color-border);
    background: var(--color-secondary-background);
    border-radius: 999px;
    padding: 0 0.5em;
    /* Use line-height/height for vertical centering */
    font-size: 0.9em;
    cursor: pointer;
    height: 26px;
    /* Fixed height */
    box-sizing: border-box;
    position: relative;
    /* For badge positioning */
    overflow: visible;
    /* Allow badge to overflow */
}

.comment-reaction.reacted {
    border-color: var(--color-secondary-active);
    background: color-mix(in srgb, var(--color-secondary-active) 15%, var(--color-secondary-background));
}

.comment-reaction-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-section-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0 var(--space-1);
    font-size: 0.7em;
    color: var(--color-muted);
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
    visibility: hidden;
    z-index: 2;
    box-shadow: var(--shadow-1);
}

.comment-reaction-count.is-visible {
    visibility: visible;
}

.add-reaction-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0 0.3em;
    color: var(--color-chat-btn-text);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-reaction-btn .grayscale-emoji {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.2s;
}

.add-reaction-btn:hover .grayscale-emoji {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.add-reaction-btn:hover {
    color: var(--color-text);
}

.comment-reaction-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding: 0.4em;
    background: var(--color-section-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    z-index: 9999;
}

#global-reaction-picker {
    position: fixed;
    /* top/left set by JS */
}

/* Legacy style: .comment-reaction-picker previously had absolute positioning here. 
   We keep the class for visual styling but override/reset positioning for the global ID. 
   The original rule was:
   .comment-reaction-picker { position: absolute; bottom: 2em; left: 0; ... }
   We replaced it above with shared visual styles.
*/

.comment-reaction-picker[hidden] {
    display: none;
}

.comment-reaction-picker-emoji {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1em;
}

.comment-topic-link {
    margin-top: 0.25em;
    font-size: 0.9em;
}

.comment-topic-switch {
    color: var(--color-active);
    text-decoration: none;
    font-weight: 600;
}

.comment-topic-switch:hover {
    text-decoration: underline;
}

.comment-action-block {
    margin-top: 0.6em;
}




.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-height: 20px;
    /* Ensure height is at least the size of the avatar */
}

.read-receipt-wrapper {
    display: inline-flex;
    align-items: center;
    /* margin-left: 0.5em; -- handled by gap */
    vertical-align: middle;
    height: 16px;
    /* Explicit height to match avatar */
}

.read-receipt-container {

    /* Reset absolute positioning */
    position: static;
    width: auto;
    display: flex;
    pointer-events: auto;
    z-index: auto;
    padding: 0;
    margin: 0;
}

.read-receipt-avatars {
    display: flex;
    align-items: center;
    gap: -4px;
    /* Slight overlap for compactness? Or keep standard gap */
    gap: 2px;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}



.comment-action-summary {
    cursor: pointer;
    font-weight: 600;
}

.comment-action-json {
    background: var(--color-section-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    margin-top: 0.4em;
    padding: 0.5em;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
    font-family: var(--font-family-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace);
    font-size: 0.9em;
}

.comment-action-edit-form {
    margin-top: 0.6em;
}

.comment-action-edit-textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: 0.5em;
    font-family: var(--font-family-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace);
    font-size: 0.9em;
    min-height: 160px;
    resize: vertical;
}

.comment-action-edit-buttons {
    margin-top: 0.4em;
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
}

.edit-comment-action-btn,
.approve-comment-btn {
    padding: 0.15em 0.4em;
    border-radius: var(--radius-2);
    font-size: 0.75rem;
    line-height: 1.3;
    cursor: pointer;
}

.edit-comment-action-btn {
    border: 1px solid var(--border-color);
    background: var(--surface-btn);
    color: var(--text-on-btn);
}

.edit-comment-action-btn:hover {
    filter: brightness(var(--hover-brightness, 0.95));
}

.approve-comment-btn {
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

.approve-comment-btn:hover {
    background: var(--color-success);
    color: var(--text-on-badge);
    border-color: var(--color-success);
}

.comment-status-label {
    margin-left: 0.4em;
    font-size: 0.75em;
    padding: 0.15em 0.5em;
    border-radius: 0.8em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    vertical-align: middle;
}

.comment-status-label.private-label {
    background-color: color-mix(in srgb, var(--color-badge-bg) 20%, transparent);
    color: var(--color-badge-bg);
}

.comment-status-label.approved-label {
    background-color: color-mix(in srgb, var(--color-complete) 20%, transparent);
    color: var(--color-complete);
}

.comment-status-label.pending-label {
    background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
    color: var(--color-warning);
}

.comment-action-container {
    position: absolute;
    bottom: 0.2em;
    right: 0.2em;
    display: flex;
    gap: 0.2em;
}

#move-comments-btn,
#search-comments-btn,
#voice-comments-btn,
#attach-image-btn,
#cancel-edit-btn {
    float: right;
    margin-right: 0.5em;
}

.comment-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#new-comment-form button[type="submit"] {
    float: right;
}

#move-comments-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

#move-comments-btn,
#search-comments-btn,
#voice-comments-btn,
#attach-image-btn,
#cancel-edit-btn,
#new-comment-form button[type="submit"],
.convert-comment-btn,
.delete-comment-btn,
.edit-comment-btn,
.review-comment-btn,
.copy-comment-link-btn {
    border: none;
    background: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--color-chat-btn-text);
}

.comment-owner-only,
.comment-delete-hidden,
.comment-approve-hidden {
    display: none;
}

.comment-copy-notice {
    position: absolute;
    right: 0.2em;
    bottom: 2.4em;
    background: var(--color-section-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: 0.2em 0.6em;
    font-size: 0.75em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.comment-attachment-list {
    clear: both;
    margin-top: 0.25em;
    font-size: 0.9em;
    color: var(--color-muted);
}

.comment-attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background: var(--color-section-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: 0.2em 0.4em;
    margin-right: 0.25em;
    margin-top: 0.2em;
}

.comment-attachment-remove {
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 0 0.1em;
}

.comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-top: 0.5em;
}

.comment-attachment-link {
    display: inline-block;
    max-width: 100%;
}

.comment-attachment-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-2);
    border: 1px solid var(--color-border);
}

.comment-copy-notice.visible {
    opacity: 1;
    transform: translateY(0);
}

.send-icon {
    width: 28px;
    height: 28px;
    color: var(--color-text);
}

@media (max-width: 600px) {
    #comments-popup {
        position: fixed;
        right: 0;
        left: 0;
        top: auto;
        bottom: env(keyboard-inset-height, 0);
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 0.5em;
        border-radius: 10px 10px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s;
    }

    #comments-popup.open {
        transform: translateY(0);
    }

    #comments-popup[data-fullscreen="true"] {
        transform: none;
    }
}

.comment-item.highlight-flash {
    animation: comment-flash 2s ease-out;
}

@keyframes comment-flash {
    from {
        background: var(--color-highlight);
    }

    to {
        background: transparent;
    }
}

#comment-participants {
    padding: var(--space-1) 0;
    min-height: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2em;
}

#comment-participants .avatar-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-participant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.add-participant-btn:hover {
    background: var(--color-section-bg);
    color: var(--color-text);
}

#typing-indicator {
    font-style: italic;
    margin: 0.3em 0;
    min-height: 24px;
    display: flex;
    align-items: center;
}

#typing-indicator .avatar-wrapper {
    width: 20px;
    height: 20px;
    margin-right: 0.2em;
}

.comment-presence-avatar {
    margin-right: 0;
}

.comment-presence-avatar.inactive {
    opacity: 0.4;
    filter: grayscale(1);
}

.comment-presence-avatar.inactive+.avatar-initial {
    opacity: 0.4;
    filter: grayscale(1);
}

/* --- Context Chips --- */
.comment-contexts-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4em;
    padding: var(--space-1) 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 26px; /* Ensure chips (22px + padding) are never clipped */
}

.comment-contexts-list:empty {
    display: none;
}

.comment-contexts-list::-webkit-scrollbar {
    display: none;
}

.context-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
    padding: 0.15em 0.5em;
    border-radius: 10px;
    background: var(--color-secondary-background);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 22px;
    box-sizing: border-box;
}

.context-chip svg,
.context-toggle-btn svg,
.drop-trigger-toggle-btn svg {
    vertical-align: middle;
    flex-shrink: 0;
}

.context-chip:hover {
    background: var(--surface-hover);
}

.context-chip.context-disabled {
    opacity: 0.4;
    text-decoration: line-through;
}

.context-chip.context-inherited {
    border-style: dashed;
}

.context-chip.context-dragging {
    opacity: 0.5;
}

.context-chip.context-drag-over-left {
    border-left: 3px solid var(--color-active);
    margin-left: -1px;
}

.context-chip.context-drag-over-right {
    border-right: 3px solid var(--color-active);
    margin-right: -1px;
}

.comment-contexts-list.context-drop-active {
    outline: 2px dashed var(--color-link);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--color-link) 8%, transparent);
}

.context-chip[draggable="true"] {
    cursor: grab;
}

.context-chip[draggable="true"]:active {
    cursor: grabbing;
}

.navigate-context-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 0.15em;
    line-height: 1;
    margin-left: 0.1em;
}

.navigate-context-btn:hover {
    color: var(--color-active);
}

.delete-context-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 0.15em;
    line-height: 1;
    margin-left: 0.1em;
}

.delete-context-btn:hover {
    color: var(--color-danger);
}

.add-context-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-secondary-background);
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
}

.add-context-btn:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Context toggle button in header */
.context-toggle-btn {
    font-size: 0.75em;
    padding: 0.15em 0.4em;
    border-radius: 8px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.context-toggle-btn:hover {
    background: var(--color-secondary-background);
}

.context-toggle-btn.context-toggle-active {
    background: var(--color-secondary-active);
    color: var(--color-badge-text);
    border-color: var(--color-secondary-active);
}

/* Drop trigger toggle button */
.drop-trigger-toggle-btn {
    font-size: 0.75em;
    padding: 0.15em 0.4em;
    border-radius: 8px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.drop-trigger-toggle-btn:hover {
    background: var(--color-secondary-background);
}

.drop-trigger-toggle-btn.drop-trigger-active {
    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.drop-trigger-toggle-btn.drop-trigger-active svg {
    stroke: var(--color-warning);
    fill: var(--color-warning);
    fill-opacity: 0.2;
}

.comment-topics-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5em;
    padding: var(--space-1) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    min-height: 36px; /* Prevent height collapse during scroll */
}

.comment-topics-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-1);
    padding: 0.2em 0.6em;
    border-radius: 12px;
    background: var(--color-secondary-background);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    height: 26px; /* Fixed height to prevent shrinking */
    box-sizing: border-box;
}

.topic-agent-avatar-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
}

.topic-agent-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.topic-agent-avatar-wrapper .avatar-initial {
    font-size: var(--text-00);
}

.ai-agent-draggable {
    cursor: grab;
}

.ai-agent-draggable:active,
.ai-agent-draggable.dragging {
    cursor: grabbing;
    opacity: 0.5;
}

.topic-creation-container.drag-over {
    background: var(--color-active);
    border-radius: 12px;
    opacity: 0.8;
}

.topic-tag:hover {
    background: var(--surface-hover);
}

.topic-tag.active {
    background: var(--color-secondary-active);
    color: var(--color-badge-text);
    border-color: var(--color-secondary-active);
}

.topic-tag.has-new-messages {
    position: relative;
    border-color: var(--color-active);
}

.topic-tag.has-new-messages::after {
    content: "New";
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--color-danger);
    color: var(--color-badge-text);
    font-size: 0.6em;
    padding: 0.1em 0.4em;
    border-radius: 8px;
    font-weight: bold;
}

/* Drag and drop styles for moving comments to topics */
.topic-tag.drag-over {
    background-color: var(--color-active);
    color: var(--color-badge-text);
    border-color: var(--color-active);
    transform: scale(1.05);
    transition: all 0.15s ease;
}

.topic-drop-target {
    transition: all 0.15s ease;
}

/* Topic reorder drag styles */
.topic-tag[draggable="true"] {
    cursor: grab;
}

.topic-tag[draggable="true"]:active {
    cursor: grabbing;
}

.topic-tag.topic-dragging {
    opacity: 0.5;
}

.topic-tag.topic-drag-over-left {
    border-left: 3px solid var(--color-active);
    margin-left: -1px;
}

.topic-tag.topic-drag-over-right {
    border-right: 3px solid var(--color-active);
    margin-right: -1px;
}

.comment-item[draggable="true"] {
    cursor: grab;
}

.comment-item[draggable="true"]:active {
    cursor: grabbing;
}

#comments-list.dragging-comments .comment-item:not(.selected-for-move) {
    opacity: 0.5;
}

.comment-drag-image {
    position: fixed;
    top: -1000px;
    left: -1000px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-active);
    color: var(--color-badge-text);
    border-radius: var(--radius-2);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

/* Hide the topic link if the message is displayed within that topic's context */
/* Use Javascript to set data-current-topic-id on the list container */
.comment-topic-link {
    margin-top: 0.25em;
    font-size: 0.9em;
}

/* 
   We want: if #comments-list[data-current-topic-id="123"] 
   Then: .comment-item[data-topic-id="123"] .comment-topic-link { display: none; }
   
   Since we can't do dynamic matching in pure CSS (attr(x) == attr(y)), we rely on 
   Stimulus list_controller to either set a specialized class or we just accept 
   that we need to hide it using a more generic approach if possible, 
   OR we use the fact that we can't easily do this in pure CSS without many rules.
   
   Wait, the requirement is "Show without #topic" if in that topic.
   
   If I am in topic 123, list_controller sets dataset.currentTopicId = 123.
   The comment has dataset.topicId = 123.
   
   I can't write a CSS rule `[data-current-topic-id=data-topic-id]`
   
   However, I can do this in Javascript when filtering/rendering? 
   No, user asked for "If current user is in matching topic".
   
   Let's use a simpler approach: 
   If I am in a topic, I only see messages from that topic (filtered by server or client).
   So ALL messages visible in Topic 123 are BY DEFINITION belonging to Topic 123.
   (Except pinned? No pinned mentions).
   
   So, IF data-current-topic-id is set (meaning we are NOT in Main), 
   we can hide ALL topic links inside the list?
   
   Wait, "Main" shows ALL messages. So currentTopicId is empty. Topic links shown.
   "Topic A" shows ONLY A messages. So currentTopicId is A. 
   
   YES! If we are in a specific topic, we only see that topic's messages.
   So we can hide ALL topic links when in a specific topic context.
   
   #comments-list:not([data-current-topic-id=""]) .comment-topic-link { display: none; }
*/

#comments-list:not([data-current-topic-id=""]) .comment-topic-link {
    display: none;
}

.topic-creation-container {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.add-topic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
}

.add-topic-btn:hover {
    background: var(--color-section-bg);
    color: var(--color-text);
}


.topic-input {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-active);
    color: var(--color-text);
    font-size: 0.85em;
    width: 100px;
    outline: none;
}

.topic-edit-input {
    display: inline-block;
    padding: 0.1em 0.4em;
    border-radius: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-active);
    color: var(--color-text);
    font-size: 0.85em;
    width: 80px;
    outline: none;
}

/* Archive topic styles */
.topic-archived-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em var(--space-2);
    border-radius: var(--radius-3);
    font-size: var(--text-0);
    cursor: pointer;
    opacity: 0.6;
    border: 1px dashed var(--border-color);
}
.topic-archived-toggle:hover {
    opacity: 1;
}
.topic-tag.topic-archived {
    opacity: 0.5;
    font-style: italic;
}
.archive-topic-btn,
.unarchive-topic-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 var(--space-1);
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}
.archive-topic-btn:hover,
.unarchive-topic-btn:hover {
    opacity: 1;
}
.delete-topic-btn {
    margin-left: var(--space-1);
}

/* Selection action bar */
.selection-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--surface-section);
    border-top: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-3);
    z-index: 100;
    animation: action-bar-slide-up 0.2s ease-out;
}

.selection-action-bar-main {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.selection-action-bar-select-all {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85em;
    font-weight: bold;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.selection-action-bar-select-all-checkbox {
    cursor: pointer;
    margin: 0;
}

.selection-action-bar-count {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--color-text);
    margin-right: var(--space-1);
}

.selection-action-bar-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--color-chat-btn-text);
    font-weight: bold;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-2);
    white-space: nowrap;
}

.selection-action-bar-btn:hover {
    background: var(--surface-hover);
}

.selection-action-bar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.selection-action-bar-btn:disabled:hover {
    background: none;
}

.selection-action-delete:hover {
    color: var(--color-danger);
}

.selection-action-bar-close {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1em;
    color: var(--text-muted);
    margin-left: auto;
    padding: var(--space-1);
}

.selection-action-bar-close:hover {
    color: var(--color-text);
}

.selection-action-bar-hint {
    font-size: 0.75em;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Hide drag hint on touch devices (no touch drag-and-drop) */
@media (pointer: coarse) {
    .selection-action-bar-hint.no-touch {
        display: none;
    }
}

@keyframes action-bar-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating search popups — positioned by CommonPopup inside #comments-popup */
/* Override popup-close-btn absolute positioning inside comments popup header */
.comments-popup-actions .popup-close-btn {
  position: static;
}

/* Streaming indicator for AI comments */
.comment-content.streaming {
    min-height: 1.5em;
}

.streaming-dots {
    display: inline-flex;
    gap: 2px;
    font-size: 1.5em;
    line-height: 1;
}

.streaming-dots span {
    animation: streaming-bounce 1.4s infinite ease-in-out both;
}

.streaming-dots span:nth-child(1) {
    animation-delay: 0s;
}

.streaming-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.streaming-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes streaming-bounce {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* Blinking cursor inline at the end of streaming content */
.streaming-cursor {
    animation: streaming-blink 1s infinite;
    color: var(--text-primary);
    margin-left: 1px;
    font-weight: normal;
}

@keyframes streaming-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.review-hint {
    background: var(--surface-btn);
    color: var(--text-on-btn);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    font-size: var(--text-0);
    white-space: nowrap;
    z-index: var(--layer-important, 999);
    animation: review-hint-fade 3s ease-out forwards;
    pointer-events: none;
    box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,0.15));
}

@keyframes review-hint-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.topic-create-option {
    color: var(--link);
    font-style: italic;
}

li:hover .topic-create-option {
    text-decoration: underline;
}