/* Theme overrides for the Quill-based LumRichTextEditor and the LumCommentThread
   layout. Uses the design-system CSS variables so the editor matches the active
   theme (Brutal / Frost / Aurora). */

.lum-richtext.ql-snow,
.lum-richtext .ql-toolbar.ql-snow,
.lum-richtext .ql-container.ql-snow {
    border-color: hsl(var(--border));
}

.lum-richtext .ql-toolbar.ql-snow {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background: hsl(var(--muted) / 0.4);
}

.lum-richtext .ql-container.ql-snow {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: inherit;
    font-size: 0.875rem;
}

.lum-richtext .ql-editor {
    color: hsl(var(--foreground));
}

.lum-richtext .ql-editor.ql-blank::before {
    color: hsl(var(--muted-foreground));
    font-style: normal;
}

/* Toolbar icon + picker colors follow the foreground/muted tokens. */
.lum-richtext .ql-snow .ql-stroke { stroke: hsl(var(--muted-foreground)); }
.lum-richtext .ql-snow .ql-fill { fill: hsl(var(--muted-foreground)); }
.lum-richtext .ql-snow .ql-picker { color: hsl(var(--muted-foreground)); }
.lum-richtext .ql-snow.ql-toolbar button:hover .ql-stroke,
.lum-richtext .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: hsl(var(--primary)); }
.lum-richtext .ql-snow.ql-toolbar button:hover .ql-fill,
.lum-richtext .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: hsl(var(--primary)); }
.lum-richtext .ql-snow .ql-picker-options {
    background: hsl(var(--popover));
    border-color: hsl(var(--border));
}

/* Read-only rendering: borrow Quill content styles without a toolbar/border. */
.lum-richtext-readonly .ql-editor {
    padding: 0;
}

/* ---- LumCommentThread ---- */
.lum-comment-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lum-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lum-comment-card {
    padding: 0.75rem 1rem;
}

.lum-comment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lum-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.lum-comment-author {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.lum-comment-time {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.lum-comment-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.lum-comment-body {
    color: hsl(var(--foreground));
    font-size: 0.875rem;
}

.lum-comment-empty {
    padding: 1.25rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.lum-comment-edit-actions,
.lum-comment-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.lum-comment-add {
    border-top: 1px solid hsl(var(--border));
    padding-top: 0.75rem;
}

.lum-comment-add-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}