/* Conversations page modal and message styles */
/* Support both legacy .modal markup used in the view and potential .ai-modal aliases */
.modal, .ai-modal { position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.modal-content, .ai-modal-content { background-color: #fff; margin: 5% auto; padding: 0; border: 1px solid #888; width: 80%; max-width: 800px; border-radius: 4px; }
.modal-header, .ai-modal-header { padding: 15px 20px; background-color: #f9f9f9; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3, .ai-modal-header h3, .modal-header h2, .ai-modal-header h2 { margin: 0; }
.close, .ai-modal-close { color: #888; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover, .ai-modal-close:hover { color: #000; }
.modal-body, .ai-modal-body { padding: 20px; max-height: 60vh; overflow: auto; }
.modal-footer, .ai-modal-footer { padding: 12px 20px; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; text-align: right; }

/* Messages inside the conversation modal (matches classes generated by JS) */
.message-item { padding: 10px 12px; border-radius: 6px; margin-bottom: 10px; line-height: 1.5; border: 1px solid transparent; }
.message-item.message-user { background-color: #eef5ff; border-color: #cfe2ff; }
.message-item.message-ai { background-color: #f4f7ff; border-color: #d6e0ff; }
.message-item.message-system { background-color: #f9f9f9; border-color: #eee; font-style: italic; }
.message-meta { font-size: 12px; color: #666; margin-bottom: 6px; }
.message-content { white-space: pre-wrap; }