/* ========================================
   User Mention Styling for Comments
   ======================================== */

/* Hide the DxHtmlEditor toolbar completely */
.comment-editor .dx-htmleditor-toolbar {
    display: none !important;
}

/* Style the comment editor container */
.comment-editor .dx-htmleditor-content {
    /*border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    min-height: 100px;*/
}

/* Focus state for comment editor */
.comment-editor .dx-htmleditor.dx-state-focused .dx-htmleditor-content {
    /*border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);*/
}

/* Style for mentions in editor (while typing) */
.dx-mention {
 background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

/* Style for mentions in timeline/display (already saved) */
.comment-html-content .dx-mention {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
  cursor: default;
}

/* Hover effect for mentions */
.dx-mention:hover,
.comment-html-content .dx-mention:hover {
    background-color: rgba(13, 110, 253, 0.2);
}

/* Mention marker (@) styling */
.dx-mention span:first-child {
    margin-right: 2px;
}

/* Timeline mention activity styling */
.mention-activity {
    background-color: rgba(13, 110, 253, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 3px solid #0d6efd;
}

.mention-activity i.bi-at {
    color: #0d6efd;
    margin-right: 4px;
}

/* Ensure HTML content in timeline is properly formatted */
.comment-html-content {
    word-wrap: break-word;
    white-space: normal;
}

.comment-html-content p {
    margin: 0;
    padding: 0;
}

/* Dropdown menu for mention suggestions */
.dx-htmleditor .ql-mention-list-container {
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dx-htmleditor .ql-mention-list-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.dx-htmleditor .ql-mention-list-item.selected,
.dx-htmleditor .ql-mention-list-item:hover {
    background-color: rgba(13, 110, 253, 0.1);
}

.dxbl-office-ribbon .dxbl-ribbon-toolbar {
    display: none !important;
}

.dxbl-html-editor .dxbl-office-ribbon {
    border: none !important;
}

.dxbl-html-editor .dxbl-widget-container .dx-htmleditor-content {
    padding: 0.25rem !important;
}

.dxbl-html-editor {
    --dxbl-html-editor-placeholder-color: black !important;
}