.chat-frame {
border-radius: 32px !important;
padding: 19px !important;
background-color: #fff7e8;
border: 1px solid #f6dba6;
max-width: 600px;
margin: 0 auto;
}
.chat-title {
font-size: 24px;
font-weight: 700;
text-align: center;
color: #2d1c10;
margin-bottom: 4px;
}
.chat-title span {
font-size: 24px;
font-weight: 700;
display: block;
}
.chat-subtitle {
font-size: 16px;
text-align: center;
color: #9b8a7a;
margin-bottom: 20px;
}
.chat-card {
background: #fff7e8;
border: 2px solid #f6dba6;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 10px;
}
.chat-bubble-area {
display: flex;
align-items: flex-start;
gap: 12px;
}
.avatar-wrapper-round {
position: relative;
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 18px;
margin-top: 6px;
}
.avatar-inner {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
}
.chat-avatar {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.status-badge {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
background: #1ec742;
color: white;
font-size: 10px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1;
}
.chat-bubble {
background: white;
border: 2px solid #f6dba6;
border-radius: 16px;
padding: 12px 16px;
font-size: 16px;
max-width: 260px;
line-height: 1.4;
position: relative;
}
.chat-bubble-with-tail::before {
content: "";
position: absolute;
left: -10px;
top: 14px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f6dba6;
}
.chat-bubble-with-tail::after {
content: "";
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid white;
}
.user-message-input {
font-size: 16px;
padding: 12px 14px;
border-radius: 12px;
resize: vertical;
width: 100%;
font-family: inherit;
box-sizing: border-box;
color: #2d1c10;
}
.message-field {
border: 1px solid #e0d5c0;
background: #ffffff;
}
.chat-card input[type="text"] {
height: 48px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid #e0d5c0;
font-size: 16px;
background: #ffffff;
color: #2d1c10;
}
.chat-card input[type="submit"] {
background-image: linear-gradient(to right, #FA9F17, #F6C884);
color: white;
font-weight: bold;
font-size: 20px;
height: 52px;
border-radius: 12px;
border: none;
cursor: pointer;
transition: 0.3s;
}
.chat-card input[type="submit"]:hover {
opacity: 0.9;
}