.conversations-title { color: #1E1F22; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; } .user-infos { text-align: left; color: #1E1F22; font-size: 14px; font-style: normal; font-weight: 600; line-height: 16px; /* 114.286% */ width: 300px; position: relative; left: -16px; top: -32px; .time-ago { color: #1E1F22; font-size: 10px; font-style: normal; font-weight: 400; line-height: 8px; padding-left: 3px; } .user-name { color: #1E1F22; font-size: 14px; font-weight: 600; line-height: 16px; /* 114.286% */ } } .message { padding: 0; border-radius: 8px; margin-bottom: 40px; margin-top: 10px; animation: fadeIn 0.5s ease-in-out; max-width: 100%; .message-content { padding-right: 60px; padding-left: 24px; display: inline-block; } &.llm { background: rgba(#3b87cc, 10%); margin-right: 100px; margin-left: 10px; text-align: left; padding-bottom: 16px; .actions { margin-right: 24px; padding-right: 0; padding-bottom: 0; } .user-infos { top: -22px; } } &.user { background: white; margin-right: 10px; margin-left: 260px; text-align: right; .bottom-actions { display: none; } .message-content { top: -16px; position: relative; } .actions { position: relative; right: 0; top: 0; height: 0; .button { background: transparent; padding: 10px 0; &.edit { color: #9B9DA6; } } } } .message-content { color: #1E1F22; font-size: 14px; font-style: normal; font-weight: 400; line-height: 16px; /* 114.286% */ } .actions { padding-top: 8px; padding-right: 16px; padding-bottom: 8px; .button { cursor: pointer; color: #1E1F22; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 400; line-height: 8px; /* 80% */ border-radius: 8px; border: solid 1px transparent; background: rgba(#3B87CC80, 50%); display: inline-flex; height: 24px; padding: 7px 10px 8px 10px; justify-content: center; align-items: flex-start; gap: 7px; flex-shrink: 0; margin-left: 16px; &:hover, &:focus, &:active { border: solid 1px rgba(#3B87CC80, 90%); background: rgba(#3B87CC80, 70%); color: white; } } } .table { width: 100%; margin-top: 1rem; margin-bottom: 1rem; th, td { padding: 8px; } tr:nth-child(even) { td { background: rgba(#3B87CC80, 10%); } } } } @media (max-width: 768px) { .chat-column.column, .message.user, .message.llm, .conversation-messages-container { width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; position: static; } } @media (min-width: 769px) { .message { max-width: 760px; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }