.message-editor { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.message-editor .ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; gap: 2px; padding: 5px; border: 0; border-bottom: 1px solid var(--line); }
.message-editor .ql-toolbar button { width: 32px; height: 32px; padding: 6px; border-radius: 4px; color: var(--text); }
.message-editor .ql-toolbar button:hover, .message-editor .ql-toolbar button:focus-visible { background: var(--surface-hover); outline: 2px solid var(--teal); }
.message-editor .ql-container { border: 0; font: inherit; }
.message-editor .ql-editor { min-height: 90px; max-height: 300px; overflow-y: auto; padding: 12px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.message-editor .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.message-editor .ql-snow .ql-stroke { stroke: var(--text); }
.message-editor .ql-snow .ql-fill { fill: var(--text); }
.message-editor .ql-snow .ql-active .ql-stroke { stroke: var(--teal); }
.message-editor .ql-snow .ql-active .ql-fill { fill: var(--teal); }
.editor-count { display: block; padding: 3px 12px; text-align: right; color: var(--muted); font-size: 12px; }
.editor-count.is-over-limit { color: var(--danger); font-weight: 700; }
.message-rich { overflow-wrap: anywhere; min-width: 0; }
.message-rich p { margin: 0 0 .55em; }
.message-rich p:last-child { margin-bottom: 0; }
.message-rich ul, .message-rich ol { padding-left: 1.8em; margin: .4em 0; }
.message-rich blockquote, .ql-editor blockquote { margin: .5em 0; border-left: 3px solid var(--teal); padding-left: 12px; color: var(--muted); }
.message-rich code, .message-editor .ql-editor code { background: var(--surface-hover); padding: 1px 4px; border-radius: 3px; }
.message-rich pre, .message-editor .ql-code-block-container { background: var(--surface-hover) !important; color: var(--text) !important; padding: 12px; border-radius: 4px; overflow-x: auto; white-space: pre-wrap; }
.message-rich a { color: var(--accent-text); text-decoration: underline; }
.reply-form .message-editor { flex: 1 0 100%; }
.composer-main:has(.message-editor) > .character-count { display: none; }
.message-editor .ql-snow .ql-tooltip { background: var(--surface); color: var(--text); border-color: var(--line); max-width: min(340px, 85vw); z-index: 25; white-space: normal; left: 0 !important; }
.message-editor .ql-snow .ql-tooltip::before { content: 'リンク先'; }
.message-editor .ql-snow .ql-tooltip a.ql-action::after { content: '保存'; }
.message-editor .ql-snow .ql-tooltip a.ql-remove::before { content: '解除'; }
.message-editor .ql-snow .ql-tooltip input { max-width: 100%; color: var(--text); background: var(--surface); }
@media (max-width: 760px) { .message-editor .ql-toolbar button { width: 36px; height: 36px; padding: 8px; } .message-editor .ql-editor { font-size: 16px; max-height: 220px; } }
.image-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; order: 2; width: 100%; min-width: 0; padding: 5px 0; }
.image-limits, .image-status { font-size: 12px; color: var(--muted); }
.image-picker.is-dragging { outline: 2px dashed var(--teal); background: var(--accent-soft); }
.image-previews, .message-images { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.image-preview { position: relative; width: 120px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.image-preview > img { width: 120px; height: 90px; object-fit: contain; background: var(--surface-hover); }
.image-preview > button[aria-label] { position: absolute; right: 2px; top: 2px; width: 30px; height: 30px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.image-progress { display: block; font-size: 11px; padding: 4px; color: var(--muted); }
.message-images { margin-top: 8px; }
.message-image { padding: 0; width: min(260px, 100%); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--surface-hover); }
.message-image img { display: block; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; margin: auto; }
.image-viewer { padding: 44px 12px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); width: min(1000px, 96vw); max-height: 95dvh; }
.image-viewer::backdrop { background: rgba(0, 0, 0, .8); }
.image-viewer [data-image-close] { position: absolute; top: 5px; right: 5px; }
.image-viewer > img { display: block; max-width: 100%; max-height: 78dvh; object-fit: contain; margin: auto; }
form[data-send-state="sending"] .image-picker { pointer-events: none; opacity: .6; }