/* Feuille de style pour deltachat */

.deltacms-chat {
    max-width: 720px;
    margin: 0 auto;
}

.deltacms-chat #chat-box {
    height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.deltacms-chat #chat-form {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.deltacms-chat .chat-msg {
    margin-top: 10px;
	width: 90%;
}

.deltacms-chat .chat-msg .chat-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.deltacms-chat .chat-msg .chat-user span:first-child {
	font-size: 0.85em;
    font-style: italic;
	min-width: 40px;
    flex-shrink: 1;
}

.deltacms-chat .chat-msg .chat-user .chat-time {
	font-size: 0.85em;
    font-style: normal;
    opacity: 0.7;
    margin-left: 10px;
}

.deltacms-chat .chat-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deltacms-chat .chat-msg .chat-text{
	flex: 1;
	line-height: 1.15;
	border-radius: 5px;
	padding: 5px;
	margin: 2px 0;
	font-family: var(--font_text);
}

.deltacms-chat .chat-msg.chat-me {
	margin-left: auto;
}

.deltacms-chat input {
    flex: 1;
	width: 90%;
    padding: 8px;
}

.deltacms-chat button {
    padding: 8px 12px;
	width: 10%;
}

.chat-clear button{
	margin-top: 10px;
	width: 40%;
	background: var(--clearButtonBackground, red);
	color: var(--clearButtonText, black);
}

.deltacms-chat .chat-delete {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
	border: 1px solid black;
    background: red;
    color: white;
    font-size: 14px;
    line-height: 16px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.deltacms-chat .chat-delete:hover {
    opacity: 1;
}