/* --- Imixs-ML/AI Office Integration ---------------------------- */ .imixs-ml, .imixs-ml:focus { background: url(./idea_16.png) no-repeat scroll right #fff !important; border: 1px solid #faa732 !important; text-align: left !important; } .imixs-date.imixs-ml, .imixs-date.imixs-ml:focus { background: url(./calendar_14.png) no-repeat scroll left #fff !important; background-position: 4px 6px, center !important; border: 1px solid #faa732 !important; } .imixs-ml:focus, .imixs-date.imixs-ml:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(244, 160, 97, 0.55) !important; } .imixs-llm, .imixs-llm:focus { background: url(./idea_16.png) no-repeat scroll right #fff !important; border: 1px solid #faa732 !important; text-align: left !important; } .imixs-date.imixs-llm, .imixs-date.imixs-llm:focus { background: url(./calendar_14.png) no-repeat scroll left #fff !important; background-position: 4px 6px, center !important; border: 1px solid #faa732 !important; } .imixs-llm:focus, .imixs-date.imixs-llm:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(244, 160, 97, 0.55) !important; } .imixs-ai-chat-history { display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 0 auto; } .imixs-ai-chat-entry { display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; } .imixs-ai-chat-header { display: flex; justify-content: space-between; align-items: center; background-color: #f5f5f5; padding: 10px 15px; font-size: 0.9em; color: #555; } .imixs-ai-chat-content { display: flex; flex-direction: column; padding: 15px; gap: 10px; } .imixs-ai-question, .imixs-ai-answer { display: flex; flex-direction: column; } .imixs-ai-label { font-weight: bold; margin-bottom: 5px; } .imixs-ai-message { background-color: #fff; border-radius: 4px; padding: 10px; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; } .user-question .imixs-ai-message { background-color: #e6f3ff; } .imixs-ai-answer .message { background-color: #f0f0f0; } .imixs-ai-loader { border: 6px solid #f3f3f3; border-top-color: rgb(243, 243, 243); border-top-style: solid; border-top-width: 6px; border-radius: 50%; border-top: 6px solid #78b8ce; width: 30px; height: 30px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }