.wrapper { padding: 52px 0 0; height: calc(100dvh); overflow-y: scroll; }
.wrapper { scrollbar-width: none;     /* Firefox */ -ms-overflow-style: none;     /* IE and Edge */ }
.wrapper::-webkit-scrollbar { display: none;     /* Chrome, Safari, Opera */ }
/* 전체 채팅 박스 */
.chat_wrap { display: flex; flex-direction: column; height: 100%; padding: 0; background-color: #f5f6fa; }
/* 메시지 영역 */
.content { flex-grow: 1; overflow-y: auto; margin-bottom: 10px; scrollbar-width: none;     /* Firefox */ -ms-overflow-style: none; }
.content::-webkit-scrollbar { display: none; }
.chat_box { display: flex; flex-direction: column; gap: 16px; scrollbar-width: none;     /* Firefox */ -ms-overflow-style: none; padding: 20px; }
.chat_box::-webkit-scrollbar { display: none; }
/* 메시지 박스 공통 */
.my_message, .other_message { display: flex; align-items: flex-end; gap: 10px; max-width: 400px; }
.my_message { flex-direction: row-reverse; align-self: flex-end; }
.other_message { flex-direction: row; align-self: flex-start; flex-direction: column; align-items: flex-start; }
.my_message + .other_message { margin-top: 20px; }
.other_message + .my_message { margin-top: 20px; }
.other_message + .other_message .img_won_box { display: none; }
/* 상대방 프로필 이미지 또는 텍스트 원형 */
.img_won_box, .txt_won_box { width: 40px; height: 40px; border-radius: 50%; background-color: #d9d9d9; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.other_message .img_won_box { display: flex; height: auto; width: auto; overflow: visible; border-radius: 0; background: transparent; grid-gap: 4px; }
.other_message .img_won_box p { font-size: 14px; font-style: normal; font-weight: 500; }
.other_message .info_box { display: flex; }
/* .img_won_box img { width: 100%; height: 100%; object-fit: cover; } */
.txt_won_box span { font-size: 16px; font-weight: bold; }
/* 메시지 내용 */
.info_box { max-width: 100%; }
.sender_name { font-size: 12px; margin-bottom: 4px; color: #555; }
.msg_box { background-color: #c9e6fc; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; max-width: 270px; word-break: break-word; border-radius: 20px 0px 20px 20px; background: rgba(0, 131, 164, 0.80); backdrop-filter: blur(5px); color: #fff; font-size: 14px; font-style: normal; font-weight: 400; }

.img_box {
	
    position: relative;
    min-width: 250px;
    max-width: 250px;
    width: 100%;
    padding: 0;
    background:transparent;
}

.img_box > img{
    width: 100%;
    object-fit: cover;
}


.other_message .msg_box { background-color: #ffffff; color: #111; border-radius: 0px 20px 20px 20px; background: #FFF;     /* 박스쉐도우 */ box-shadow: 0px 0px 7.1px 0px rgba(143, 175, 183, 0.30); }

.other_message .img_box{

}

/* 시간 표시 */
.time_box { display: flex; flex-direction: column; justify-content: flex-end; font-size: 10px; color: #888; padding-left: 5px; }
/* 전송 입력창 영역 */
.send_box { display: flex; align-items: center; gap: 10px; background: var(---primary, #0D3D48); padding: 10px; }
.send_box > form { display: flex; align-items: center; gap: 10px; width: 100%; }
.wr_text { display: flex; width: 100%; padding: 10px; justify-content: flex-start; align-items: center; gap: 8px; align-self: stretch; border-radius: 5px; background: rgba(68, 125, 139, 0.40); }
.send_box input.frm_input { color: var(--gray-10, #FFF); font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: -0.28px; background-color: transparent; border: none; flex: 1; }
.send_box input.frm_input::placeholder { color: #ffffff; opacity: 1; }
.send_box input.frm_input:focus { outline: none; border-color: #999; }
.send_box button { background: none; border: none; cursor: pointer; }
.send_box button img { width: 24px; height: 24px; }
/* #chat_file_upload_btn { display: none; } */
#app .header .inner .title span { position: relative; }
#app .header .inner .title span::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: #30FFDA; border-radius: 50%; }