#comments-popup {
    display: none;
    position: absolute;
    right: 2em;
    /* top: 10em; */
    z-index: 1000;
    width: 420px;
    height: 640px;
    max-height: 80vh;
    min-width: 200px;
    min-height: 200px;
    transition: all 0.2s;
    max-width: calc(100vw - 0.5em) !important;
}

#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;
    /* 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: wrap;
    gap: 0.5em;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

#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: vertical;
    font-size: 16px;
    /* Prevent iOS zoom on focus */
}

#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);
}

.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-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 4px;
    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: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.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: 0 6px 18px rgba(0, 0, 0, 0.12);
    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-accent, #007bff);
    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: 4px;
    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: 4px;
    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 {
    margin-top: 0.6em;
}

.comment-status-label {
    margin-left: 0.4em;
    font-size: 0.85em;
    color: var(--color-muted);
}

.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,
.convert-comment-btn,
.delete-comment-btn,
.edit-comment-btn,
.copy-comment-link-btn {
    border: none;
    background: none;
    font-weight: bold;
    cursor: pointer;
    color: var(--color-chat-btn-text);
}
}

.comment-owner-only {
    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: 4px;
    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: 4px;
    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: 4px;
    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);
    }
}

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

@keyframes comment-flash {
    from {
        background: #ffff99;
    }

    to {
        background: transparent;
    }
}

#comment-participants {
    margin-bottom: 0.3em;
    min-height: 20px;
}

#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.2em;
}

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

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

.comment-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

.topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    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;
}

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

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

.topic-tag.has-new-messages {
    position: relative;
    border-color: var(--color-accent, #007bff);
}

.topic-tag.has-new-messages::after {
    content: "New";
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #ff3b30;
    color: white;
    font-size: 0.6em;
    padding: 0.1em 0.4em;
    border-radius: 8px;
    font-weight: bold;
}

/* 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;
}

.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-accent, #007bff);
    color: var(--color-text);
    font-size: 0.85em;
    width: 100px;
    outline: none;
}