.rich-composer { min-width: 0; width: 100%; }
.rich-composer .rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.rich-composer .rich-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 5px; background: var(--control-bg); border: 1px solid transparent; color: var(--ink); border-radius: 4px; }
.rich-composer .rich-toolbar button svg { width: 17px; height: 17px; stroke-width: 1.8; }
.rich-composer .rich-toolbar button:hover, .rich-composer .rich-toolbar button[aria-pressed="true"] { background: var(--selected-background); border-color: var(--accent-border); }
.rich-composer .rich-toolbar button:disabled { opacity: .4; cursor: default; }
.rich-composer .rich-toolbar select { width: auto; max-width: 100%; min-height: 30px; height: 30px; padding: 3px 24px 3px 7px; font: 12px Arial, sans-serif; color: var(--ink); background-color: var(--control-bg); border: 1px solid var(--line); border-radius: 4px; }
.rich-composer .rich-editor { padding: 0; white-space: normal; background: var(--control-bg); color: var(--ink); }
.rich-composer .rich-editor::before { content: none; }
.rich-composer .tiptap { min-height: 90px; padding: 10px 12px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 Arial, sans-serif; }
.rich-composer .tiptap p.is-editor-empty:first-child::before { color: var(--muted); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
.rich-composer .composer-input { display: flex; flex-direction: column; background: var(--control-bg); }
.rich-composer .composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px; border-top: 1px solid var(--line); flex-shrink: 0; }
.rich-composer .tiptap[data-empty="true"]::before { color: var(--muted); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
.rich-composer .tiptap p, .formatted-message-body p { margin: 0 0 .65em; }
.rich-composer .tiptap > :last-child, .formatted-message-body > :last-child { margin-bottom: 0; }
.rich-composer .tiptap h2, .formatted-message-body h2 { font: 600 20px/1.3 Arial, sans-serif; color: var(--ink); margin: 1em 0 .45em; letter-spacing: 0; }
.rich-composer .tiptap h3, .formatted-message-body h3 { font: 600 16px/1.35 Arial, sans-serif; color: var(--ink); margin: .9em 0 .4em; letter-spacing: 0; }
.rich-composer .tiptap > h2:first-child, .rich-composer .tiptap > h3:first-child, .formatted-message-body > h2:first-child, .formatted-message-body > h3:first-child { margin-top: 0; }
.rich-composer .tiptap ul, .rich-composer .tiptap ol, .formatted-message-body ul, .formatted-message-body ol { padding-left: 1.5em; margin: .4em 0 .7em; }
.rich-composer .tiptap li p, .formatted-message-body li p { margin-bottom: .2em; }
.rich-composer .tiptap blockquote, .formatted-message-body blockquote { margin: .7em 0; padding: 8px 12px; background: var(--surface-2); color: var(--ink); border-left: 3px solid var(--line-strong); border-radius: 0 4px 4px 0; }
.rich-composer .tiptap blockquote[data-callout], .formatted-message-body blockquote[data-callout] { border-color: var(--brand); background: var(--selected-background); }
.rich-composer .tiptap blockquote[data-callout]::before, .formatted-message-body blockquote[data-callout]::before { display: block; font: 600 12px/1.4 Arial, sans-serif; color: var(--link); margin-bottom: 5px; }
blockquote[data-callout="info"]::before { content: "Information"; }
blockquote[data-callout="decision"]::before { content: "Decision"; }
blockquote[data-callout="action"]::before { content: "Action needed"; }
.rich-composer .tiptap hr, .formatted-message-body hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.rich-composer .tiptap a, .formatted-message-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.rich-composer .tiptap table, .formatted-message-body table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: .7em 0; }
.rich-composer .tiptap th, .rich-composer .tiptap td, .formatted-message-body th, .formatted-message-body td { min-width: 50px; padding: 7px 9px; border: 1px solid var(--line-strong); vertical-align: top; position: relative; overflow-wrap: anywhere; }
.rich-composer .tiptap th, .formatted-message-body th { font-weight: 600; background: var(--surface-2); }
.rich-composer .tiptap .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--selected-background); opacity: .5; pointer-events: none; }
.rich-composer .tiptap pre, .formatted-message-body pre { background: var(--surface-2); padding: 10px; border-radius: 4px; overflow-x: auto; white-space: pre; }
.rich-composer .tiptap code, .formatted-message-body code { font-family: Consolas, monospace; font-size: 13px; }
.rich-image-panel { display: grid; gap: 8px; margin-top: 8px; }
.rich-image-panel[hidden] { display: none; }
.rich-image-settings { display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: end; gap: 8px; }
.rich-image-settings label { display: grid; gap: 4px; min-width: 0; margin: 0; font-size: 12px; color: var(--muted); }
.rich-image-settings label span { overflow-wrap: anywhere; }
.rich-image-settings input, .rich-image-settings select { width: 100%; min-width: 0; font-size: 13px; }
.communication-image-preview { margin: 0; max-width: 100%; min-width: 0; }
.communication-image-preview.rich-image-small { width: 240px; }
.communication-image-preview.rich-image-medium { width: 480px; }
.communication-image-preview.rich-image-large { width: 100%; }
.communication-image-preview .message-attachment-preview { width: 100%; max-height: none; }
.communication-image-preview .message-attachment-preview img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.communication-image-preview figcaption { color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 6px; overflow-wrap: anywhere; }
.rich-expanded-dialog { width: min(1100px, calc(100vw - 32px)); max-width: none; height: calc(100dvh - 48px); max-height: none; padding: 16px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.rich-expanded-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.rich-expanded-dialog .rich-composer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rich-expanded-dialog .composer-input { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rich-expanded-dialog .rich-composer .rich-editor { flex: 1; min-height: 100px; max-height: none; overflow: auto; }
.rich-expanded-dialog .rich-composer .composer-actions { flex: 0 0 auto; }
.rich-expanded-dialog .rich-image-panel { max-height: 22vh; overflow: auto; flex: 0 0 auto; }
@media (max-width: 600px) {
    .rich-composer .rich-toolbar { gap: 3px; }
    .rich-composer .rich-toolbar button { width: 32px; height: 32px; }
    .rich-expanded-dialog { width: calc(100vw - 16px); height: calc(100dvh - 24px); padding: 8px; }
    .rich-image-settings { grid-template-columns: minmax(0, 1fr) 90px; }
}