.chat-box {
    margin-top: 0px !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 18px !important;
    padding-bottom: 20px !important;
    text-decoration: none !important;
    outline: 0px !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    -webkit-border-radius: 10px 10px 10px 10px !important;
    border-radius: 10px 10px 10px 10px !important;
    -webkit-box-shadow: 1px 4px 4px 1px rgba(184,175,184,0.4) !important;
    -moz-box-shadow: 1px 4px 4px 1px rgba(184,175,184,0.4) !important;
    box-shadow: 1px 4px 4px 1px rgba(184,175,184,0.4) !important;
    transition: all .2s ease;
    border: 0px !important;
}

.chat-box:hover {
    -webkit-box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    -moz-box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    transition: all .2s ease;
    border: 0px !important;
}

.chat-box-caption {
    font-size: 16px !important;
    font-family: 'ubuntuMedium' !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}

.chat-panel {
    width: 100% !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 10px !important;
}

.chat-account-box {
    margin-top: 20px !important;
	margin-bottom: 20px !important;
    padding-bottom: 10px !important;
}

.chat-signal-box {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.chat-signal {
	width: 1.0rem !important;
    height: 1.0rem !important;
    border-radius: 30px 30px 30px 30px !important;
}

.chat-signal-on {
	background-color: #25d366 !important;
	border: 1px solid rgba(33, 189, 91, 1) !important;
}

.chat-signal-busy {
	background-color: #ff4343 !important;
	border: 1px solid rgba(255, 60, 60, 1) !important;
}

.chat-signal-off {
	background-color: #cfd4dd !important;
	border: 1px solid rgba(186, 190, 198, 1) !important;
}

.chat-cover-micro {
    width: 1.3rem !important;
    height: 1.3rem !important;
}

.chat-cover-tiny {
    width: 2.0rem !important;
    height: 2.0rem !important;
}

.chat-cover-mini {
    width: 3.0rem !important;
    height: 3.0rem !important;
}

.chat-cover-small {
    width: 3.6rem !important;
    height: 3.6rem !important;
}

.chat-cover-medium {
    width: 4.6rem !important;
    height: 4.6rem !important;
}

.chat-cover-large {
    width: 5.6rem !important;
    height: 5.6rem !important;
}

.chat-cover-image {
    cursor: pointer !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(207, 212, 221, 0.6) !important;
}

.chat-cover-message-image {
    cursor: pointer !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(207, 212, 221, 0.6) !important;
}

.chat-cover {
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0px 0px 0px 0px !important;
    border-radius: 30px 30px 30px 30px !important;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    white-space: nowrap !important;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 1 !important;
}

.chat-cover:hover {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0.5 !important;
}

.chat-account-name {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
    padding-left: 0px !important;
    color: #1A1D23 !important;
    font-family: 'ubuntuRegular' !important;
    font-size: 14px !important;
    line-height: 1.3;
    /*max-width: 200px !important;*/
    /*
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    */
}

.chat-account-title {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
    padding-left: 0px !important;
    color: #5E6A82 !important;
    font-family: 'ubuntuLight' !important;
    font-size: 13px !important;
    line-height: 1.3;
    /*max-width: 200px !important;*/
    /*
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    */
}

.chat-account-message {
	margin-top: -18px !important;
	margin-bottom: 0px !important;
    padding-left: 0px !important;
    color: #5E6A82 !important;
    font-family: 'ubuntuLight' !important;
    font-size: 12px !important;
    line-height: 1.3;

    /*max-width: 40% !important;*/
    /*
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    */
}



.chat-header-block {
    padding: 20px 30px 20px 30px !important;
    margin-bottom: 20px !important;
}

.chat-header-box {
    padding-top: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 10px !important;
    min-height: 64px !important;
    text-decoration: none !important;
    outline: 0px !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    -webkit-border-radius: 0px 0px 0px 0px !important;
    border-radius: 0px 0px 0px 0px !important;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(184,175,184,0.4) !important;
    -moz-box-shadow: 0px 2px 2px 0px rgba(184,175,184,0.4) !important;
    box-shadow: 0px 2px 2px 0px rgba(184,175,184,0.4) !important;
    transition: all .2s ease;
    border: 0px !important;
}

.chat-header-box:hover {
    /*
    -webkit-box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    -moz-box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    box-shadow: 2px 8px 8px 2px rgba(184,175,184,0.4) !important;
    transition: all .2s ease;
    border: 0px !important;
    */
}


.chat-top {
	position: fixed !important;
	top: 0px !important;
}

.chat-message-top {
	position: fixed !important;
	top: 0px !important;
}

.chat-message-middle {
    overflow-y: auto !important;
}

.chat-message-middle-padding {
    padding: 0px 10px 0px 10px !important;
}

.chat-message-middle-height {
    height: 98% !important;
}

.chat-message-bottom {
	position: fixed !important;
	bottom: 0px !important;
}

.chat-message-input-block {
    padding: 10px 0px 0px 0px !important;
    /*margin-top: 0px !important;*/
}

.chat-header-message {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    color: #1A1D23 !important;
    font-family: 'ubuntuMedium' !important;
    font-size: 26px !important;
}


.chat-start-box-width {
    min-width: 480px !important;
    max-width: 540px !important;
}

.chat-start-title {
    font-size: 36px !important;
    font-family: 'ubuntuLight' !important;
    color: #7D7A8D !important;
}







.chat-container {
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    /*background-color: #e5ddd5;*/ /* Cor de fundo similar ao WhatsApp Web */
    /*max-width: 600px;*/
    /*margin: 0 auto;*/
}

.message {
    display: flex;
    margin-bottom: 10px;
}

.bubble {
    padding: 5px 10px;
    border-radius: 8px; /* Cantos levemente arredondados */
    max-width: 80%;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.timestamp {
    display: block;
    font-size: 0.75em;
    margin-top: 0px;
    text-align: right;
    opacity: 0.6;
}

/* Estilo para mensagens recebidas (azuis claras no WhatsApp) */
.received {
    justify-content: flex-start;
}

.received .bubble {
    background-color: #ffffff;
    border-radius: 8px 8px 8px 8px; /* Canto próximo à ponta mais reto */
}

.received .bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px; /* Ajuste para posicionar a ponta */
    width: 0;
    height: 0;
    border-top: 11px solid #ffffff; /* Cor da ponta */
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    /* Usando clip-path para um formato mais curvo, se preferir */
    /* clip-path: polygon(0 0, 100% 100%, 0 100%); */ 
}

/* Estilo para mensagens enviadas (verdes no WhatsApp) */
.sent {
    justify-content: flex-end;
}

.sent .bubble {
    background-color: #e5ebfe;
    border-radius: 8px 8px 8px 8px; /* Canto próximo à ponta mais reto */
}

.sent .bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px; /* Ajuste para posicionar a ponta */
    width: 0;
    height: 0;
    border-top: 11px solid #e5ebfe; /* Cor da ponta */
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    /* Usando clip-path para um formato mais curvo, se preferir */
    /* clip-path: polygon(100% 0, 0 100%, 100% 100%); */
}