/* Chat Rich Text Editor Styles */

.chat-editor-container {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    position: relative;
}

    .chat-editor-container .ql-toolbar {
        /*background: rgba(0, 0, 0, 0.02);*/
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding: 4px 8px;
    }

    .chat-editor-container .ql-container {
        border: none;
        font-family: inherit;
    }

    .chat-editor-container .ql-editor {
        min-height: 60px;
        max-height: 200px;
        overflow-y: auto;
        font-size: 14px;
        line-height: 1.5;
        padding: 8px 48px 8px 12px;
    }

        .chat-editor-container .ql-editor.ql-blank::before {
            font-style: normal;
            color: rgba(0, 0, 0, 0.4);
            left: 12px;
        }

    /* Compact toolbar buttons */
    .chat-editor-container .ql-toolbar button {
        width: 24px !important;
        height: 24px !important;
        padding: 2px !important;
    }

    .chat-editor-container .ql-toolbar .ql-picker {
        height: 24px !important;
    }

    .chat-editor-send-button {
        position: absolute;
        bottom: 4px;
        right: 4px;
        z-index: 10;
    }

    /* Mobile FAB + docked editor */
    @media (max-width: 600px) {
        .chat-editor-mobile-fab {
            position: fixed;
            right: 16px;
            bottom: 16px;
            z-index: 3000;
        }

        .chat-editor-container {
            display: none;
        }

        .chat-editor-container.mobile-open {
            display: block;
            overflow: hidden;
            width: 100vw;
            border-radius: 12px 12px 0 0;
            z-index: 2500;
            box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
        }

        .chat-editor-mobile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 8px 0 12px;
        }

        .chat-editor-container .ql-editor {
            max-height: 40vh;
        }
    }

    @media (min-width: 601px) {
        .chat-editor-mobile-fab {
            display: none;
        }

        .chat-editor-mobile-header {
            display: none;
        }
    }

/*Dark mode support*/
.mud-theme-dark .chat-editor-container {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.12);
}

.mud-theme-dark .chat-editor-container .ql-toolbar {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mud-theme-dark .chat-editor-container .ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.4);
}

.mud-theme-dark .chat-editor-container .ql-stroke {
    stroke: rgba(255, 255, 255, 0.7);
}

.mud-theme-dark .chat-editor-container .ql-fill {
    fill: rgba(255, 255, 255, 0.7);
}


/* Chat message content rendering styles */
.chat-message-content {
    word-wrap: break-word;
    word-break: break-word;
}

    .chat-message-content p {
        margin: 0;
        padding: 0;
    }

    .chat-message-content strong {
        font-weight: 600;
    }

    .chat-message-content em {
        font-style: italic;
    }

    .chat-message-content u {
        text-decoration: underline;
    }

    .chat-message-content s {
        text-decoration: line-through;
    }

    .chat-message-content code {
        background: rgba(0, 0, 0, 0.08);
        padding: 2px 4px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
    }

    .chat-message-content pre {
        background: rgba(0, 0, 0, 0.08);
        padding: 8px;
        border-radius: 4px;
        overflow-x: auto;
        margin: 4px 0;
    }

    .chat-message-content blockquote {
        border-left: 3px solid rgba(0, 0, 0, 0.2);
        padding-left: 8px;
        margin: 4px 0;
        color: rgba(0, 0, 0, 0.6);
    }

    .chat-message-content ul,
    .chat-message-content ol {
        margin: 4px 0;
        padding-left: 24px;
    }

    .chat-message-content a {
        color: #1976d2;
        text-decoration: none;
    }

        .chat-message-content a:hover {
            text-decoration: underline;
        }