.ql-mention-list-container {
  width: 270px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(30, 30, 30, 0.08);
  z-index: 9001;
}

.ql-mention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ql-mention-list-item {
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  padding: 0 20px;
  vertical-align: middle;
}

.ql-mention-list-item.selected {
  background-color: #d3e1eb;
  text-decoration: none;
}

.mention {
  height: 24px;
  width: 65px;
  border-radius: 6px;
  background-color: #d3e1eb;
  padding: 3px 0;
  margin-right: 2px;
  user-select: all;
}

.mention > span {
  margin: 0 3px;
}

/* ===============================
   Discussion Listing Styles
   =============================== */

/* Used in the discussion listing section to display HTML-formatted content */
/* Preserves spaces and line breaks for code or indented text */
.content-list {
    white-space: pre-wrap;      /* keep multiple spaces & newlines */
    word-break: break-word;
    line-height: 1.5;
}

/* Adds vertical spacing between paragraphs */
.content-list p {
    margin: 0 0 0.75rem;
}

/* Default styling for code blocks (e.g., Quill's code-block or <pre><code>) */
.content-list pre {
    margin: 0 0 0.75rem;
    padding: .5rem;
    background: #f7f7f7;
    border-radius: 6px;
    overflow: auto;
}

/* Monospace font settings for code elements */
.content-list code, .content-list pre, .content-list .ql-syntax {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95em;
}

/* Alignments for Quill-generated content */
.content-list .ql-align-center { text-align: center; }
.content-list .ql-align-right  { text-align: right; }
.content-list .ql-align-justify{ text-align: justify; }
.content-list .ql-direction-rtl{ direction: rtl; }

/* ===============================
   Quill Editor Overrides
   =============================== */

/* Override Quill container dimensions */
.override-quill-css .ql-container {
    height: auto !important;
    width: 100% !important;
}

/* Adjust editor height and overflow behavior */
.override-quill-css .ql-editor {
    min-height: 300px;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* ===============================
   Table Styling in Discussions
   =============================== */

/* Base table appearance inside .comment containers */
.comment .ql-table-better {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-size: 14px;
    background-color: #fff;
}

/* Table cell borders and padding */
.comment .ql-table-better th,
.comment .ql-table-better td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
}

/* Zebra striping for better readability */
.comment .ql-table-better tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Row hover effect */
.comment .ql-table-better tr:hover {
    background-color: #eef3ff;
}

/* Responsive layout: enable horizontal scroll on smaller screens */
.comment {
    overflow-x: auto;
}

.comment .ql-table-better {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* Optional: add subtle shadow for a boxed appearance */
.comment .ql-table-better {
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    border-radius: 6px;
}

/* Ensure Quill table dropdown appears above editor content */
.ql-table-better,
.ql-table-select-container,
.ql-table-select-list {
    z-index: 8 !important;
}

/* Enable horizontal scrolling within the editor container */
.override-quill-css {
    overflow-x: scroll;
}