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

body.chat-fullscreen {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

body.chat-fullscreen main {
    height: 100vh;
    width: 100vw;
    max-width: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.comments-fullscreen-page {
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.comments-fullscreen-page #comments-popup,
#comments-popup[data-fullscreen="true"] {
    display: flex !important;
    position: static;
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    border: none;
    z-index: auto;
    box-sizing: border-box;
    padding: 1em;
}

.comments-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
}

.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;
    /* 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: 0.5em 0;
    margin-bottom: 0.5em;
    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: 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.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, orange 20%, transparent);
    color: orange;
}

.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,
.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);
    }

    .comments-fullscreen-page #comments-popup,
    #comments-popup[data-fullscreen="true"] {
        display: flex !important;
        transform: none;
        border-radius: 0;
        padding: 1em;
        position: static;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}

.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: nowrap;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0;
    margin-bottom: 0.5em;
    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: 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;
    white-space: nowrap;
    height: 26px; /* Fixed height to prevent shrinking */
    box-sizing: border-box;
}

.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;
}

/* Drag and drop styles for moving comments to topics */
.topic-tag.drag-over {
    background-color: var(--color-accent, #007bff);
    color: white;
    border-color: var(--color-accent, #007bff);
    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-accent, #007bff);
    margin-left: -1px;
}

.topic-tag.topic-drag-over-right {
    border-right: 3px solid var(--color-accent, #007bff);
    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: 8px 16px;
    background-color: var(--color-accent, #007bff);
    color: white;
    border-radius: 4px;
    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-accent, #007bff);
    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-accent, #007bff);
    color: var(--color-text);
    font-size: 0.85em;
    width: 80px;
    outline: none;
}

/* Selection hint popup */
.selection-hint-popup {
    position: fixed;
    background: var(--color-bg-secondary, #f8f9fa);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 10000;
    animation: hint-fade-in 0.2s ease-out;
}

.selection-hint-popup .hint-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8em;
    color: var(--color-text-secondary, #6c757d);
}

.selection-hint-popup .hint-content span {
    display: block;
}

@keyframes hint-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .selection-hint-popup {
        background: var(--color-bg-secondary, #2d2d2d);
        border-color: var(--color-border, #444);
    }
}