body {
    margin: 0;
    padding: 0;
    background: #f0f2f5;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

.chat-container {
    max-width: 800px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.chat-header {
    padding: 20px 20px;
    background: #ffffff;
    color: #333333;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 30px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.title-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.title-group {
    display: flex;
    flex-direction: column;
}

.chat-header h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2C3E50;
    line-height: 1;
}

.operating-hours {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #666;
    line-height: 1;
}

/* More menu styles */
.more-menu-container {
    position: relative;
}

.more-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.more-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-menu {
    position: absolute;
    top: 40px;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    z-index: 1000;
}

.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-option:hover {
    background-color: #f5f5f5;
}

/* Center alignment for messages container */
.messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-align content to reduce horizontal whitespace */
}

/* Base message styling */
.message {
    margin: 4px 0; /* slightly tighter vertical spacing */
    padding: 8px 14px; /* reduce padding */
    border-radius: 16px;
    width: 95%; /* use more width to reduce side gaps */
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
    animation: fadeIn 0.3s ease-in-out;
}

/* Message timestamp styling */
.message-timestamp {
    font-size: 0.8rem;
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 500;
    text-align: left;
}

.user-message .message-timestamp {
    color: rgba(255, 255, 255, 1);
}

.bot-message .message-timestamp {
    color: rgba(0, 0, 0, 0.6);
}

/* Message content container */
.message-content {
    width: 100%;
    line-height: 1.2;
    margin-bottom: 6px; 
}

/* Copy button styling */
.copy-button {
    padding: 5px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.copy-button:hover {
    background-color: transparent;
}

.copy-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.copy-button:hover .copy-icon {
    opacity: 1;
}

/* User message wrapper - centered */
.user-response-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    width: 100%;
    margin: 6px 0;
    position: relative;
}

/* User message container - centered */
.user-message-container {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    gap: 8px;
    position: relative;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* User message styling */
.user-message {
    background: linear-gradient(-84deg, var(--Blue-500, #16BB5B) -23.02%, var(--Green-700, #5197FF) 90.36%);
    color: white;
    margin: 4px 0;
    padding: 8px 16px;
    text-align: left;
    border: none;
    border-top-right-radius: 0px;
    margin-right: 0; /* Remove right margin for centering */
}

/* Bot response wrapper - centered */
.bot-response-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    width: 100%;
    margin: 6px 0;
    position: relative;
}

/* Bot icon container - dedicated container for icon */
.bot-icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center; /* Change from center to flex-start to move icon upward */
    align-self: flex-start; /* Align icon to the top of the message */
    justify-content: center;
    flex-shrink: 0;
    margin-top: 10px;
    margin-bottom: 4px;
}

/* .bot-icon-container.right-icon intentionally omitted (no styles needed) */

.bot-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* User icon containers */
.user-icon-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

/* .user-icon-container.left-icon intentionally omitted (no styles needed) */

.user-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Bot message container - centered */
.bot-message-container {
    display: flex;
    align-items: flex-start; /* align to top of line */
    justify-content: flex-start; /* left-align bot row */
    gap: 8px;
    position: relative;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Bot message styling */
.bot-message {
    position: relative; /* Ensure relative positioning for absolute children */
    background: #F3F4F6;
    color: black;
    border-top-left-radius: 0px;
    padding: 8px 14px; /* tighter */
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.3px;
    white-space: pre-wrap;
    margin-top: 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Adjust the existing bot-message typing animation */
.bot-message.typing::after {
    content: none;
}

/* 타이핑 커서 스타일 */
.typing-cursor {
    display: none; /* 커서 숨김 */
}

/* Adjusted feedback container positioning for centered messages */
.feedback-container {
    display: flex;
    justify-content: flex-start; /* Changed from flex-end to flex-start to align buttons left */
    gap: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    margin-top: 10px; /* Space between message content and buttons */
    padding-top: 5px; /* Add padding to separate from message */
}

.feedback-container:hover {
    opacity: 1;
}

/* Make feedback buttons smaller for inline display */
.feedback-button {
    padding: 5px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.feedback-icon {
    width: 22px;
    height: 22px;
}

/* Update the reasons container position to work inside the message */
.reasons-container {
    position: absolute;
    right: 0;
    bottom: 30px; /* Position above the feedback buttons */
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 250px;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow: hidden;
    font-size: 14px;
}

.bot-message.typing {
    position: relative;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.bot-message br {
    display: block;
    margin: 0.35em 0;         /* tighter line breaks */
    content: "";
}

.bot-message p {
    margin: 0.25em 0;         /* tighter paragraphs */
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.bot-message p:first-child {
    margin-top: 0;
}

.bot-message p:last-child {
    margin-bottom: 0;
}

.bot-message ul, .bot-message ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.bot-message li {
    margin: 0.15em 0;         /* tighter list items */
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.bot-message strong {
    font-weight: 600;
}

.bot-message pre {
    max-width: 100%;
    overflow-x: auto;  /* 코드 블록만 가로 스크롤 허용 */
    white-space: pre-wrap;  /* 긴 줄 자동 줄바꿈 */
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

.input-container {
    display: flex;
    gap: 0;  /* 간격 제거 */
    padding: 20px;
    background: white;
    position: relative;  /* 추가: 상대 위치 설정 */
    width: 100%;
    box-sizing: border-box;
}

#user-input::placeholder {
    color: #C3C6CC;  /* 연한 회색으로 변경 */
}

#user-input {
    flex: 1;
    padding: 15px;
    padding-right: 100px;  /* 글자 수 카운터와 전송 버튼을 위한 여백 확보 */
    color: #333;  /* 입력 텍스트 색상은 진하게 유지 */
    border: 2px solid #e5e7eb;
    border-radius: 30px;
    font-size: 16px;
    background: white;
    transition: border-color 0.3s ease;
    outline: none;
    width: auto;  /* 원래대로 복원 */
    max-width: none;  /* 원래대로 복원 */
}

#user-input:focus {
    border-color: #bbbdc0;
}

#user-input:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
}

#send-button {
    position: absolute;
    right: 15px;        /* 변경: 오른쪽에서 더 멀리 (30px에서 35px로 변경) */
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;      /* 변경: 패딩 축소 (12px에서 10px로) */
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 35px;        /* 변경: 40px에서 35px로 더 줄임 */
    height: 35px;       /* 변경: 40px에서 35px로 더 줄임 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#send-button:disabled .send-icon {
    opacity: 0.5;
}

.send-icon {
    width: 25px;    /* 변경: 아이콘 크기 더 축소 (30px에서 25px로) */
    height: 25px;   /* 변경: 아이콘 크기 더 축소 (30px에서 25px로) */
    opacity: 1;
    transition: all 0.3s ease;
}

.send-icon-hover {
    display: none;  /* 기본적으로 컬러 아이콘 숨김 */
    position: absolute;
}

#send-button:hover #send-icon-default {
    display: none;  /* 호버 시 기본 아이콘 숨김 */
}

#send-button:hover .send-icon-hover {
    display: block;  /* 호버 시 컬러 아이콘 표시 */
}

/* 기존 필터 관련 스타일 제거 */
#send-button:hover .send-icon {
    opacity: 1;
}

.loading-container {
    display: flex;
    flex-direction: column; /* Column layout */
    align-items: flex-start; /* Align items to left like regular messages */
    padding: 10px 16px;
    margin-top: 20px;
    background: #F3F4F6;
    border-radius: 15px;
    border-top-left-radius: 0px;
    width: 90%;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-in-out;
    transition: all 0.3s ease; /* Add transition for smoother changes */
}

.loading-dots {
    display: inline-flex;
    gap: 8px;
    padding: 6px 0;
    margin-top: 6px;
    align-self: flex-start;
    transition: opacity 0.2s ease;
}

.dot {
    width: 8px;
    height: 8px;
    background: #2b2e2c; /* brighter color */
    border-radius: 50%;
    animation: bounce 0.9s infinite;
}

.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Loading label next to dots */
.loading-label {
    display: inline-block;
    margin-left: 10px;
    color: #6b7280;
    font-size: 14px;
    vertical-align: middle;
}

/* Ensure loading container has visible presence */
.loading-container {
    min-height: 48px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 스크롤바 스타일링 */
.messages::-webkit-scrollbar {
    width: 6px;
}

.messages::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.messages::-webkit-scrollbar-thumb {
    background: #c9ced6; /* default thumb color */
    border-radius: 10px;
}

.messages::-webkit-scrollbar-thumb:hover {
    background: #0bb368;
}

.attachment-button {
    position: absolute;
    right: 70px;    /* Same positioning as char-count had */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-icon {
    width: 22px;
    height: 22px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.attachment-button:hover .attachment-icon {
    opacity: 1;
}

@media (max-width: 768px) {
    .chat-container {
        height: 100vh;
        margin: 0;
    }
    
    .message {
        max-width: 85%;
    }
}

/* Feedback buttons styles */
.feedback-container {
    display: flex;
    justify-content: flex-start; /* Changed from flex-end to flex-start to align buttons left */
    gap: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    margin-top: 10px; /* Space between message content and buttons */
    padding-top: 5px; /* Add padding to separate from message */
}

.feedback-container:hover {
    opacity: 1;
}

/* Make sure the transparency doesn't affect children */
.feedback-button {
    padding: 5px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.feedback-button:hover {
    background-color: transparent;
}

.feedback-icon {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.feedback-button:hover .feedback-icon {
    opacity: 1;
}

.feedback-button.helpful:hover .feedback-icon, 
.feedback-button.helpful.selected .feedback-icon {
    opacity: 1;
}

.feedback-button.unhelpful:hover .feedback-icon, 
.feedback-button.unhelpful.selected .feedback-icon {
    opacity: 1;
}

.feedback-button.selected, .feedback-button.disabled {
    cursor: default;
    background-color: transparent;
}

.feedback-button.disabled .feedback-icon {
    opacity: 0.3;
}

/* Reasons selector styling */
.reasons-container {
    position: absolute;
    right: 0;
    bottom: 30px; /* Position above the feedback buttons */
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 250px;
    opacity: 0; /* Initial opacity before animation */
    transform: translateY(10px);
    transition: transform 0.3s ease; /* Remove opacity from transition */
    z-index: 1000;
    overflow: hidden;
    font-size: 14px;
}

/* Force full opacity when shown and override any parent opacity */
.reasons-container.show {
    opacity: 1 !important;
    transform: translateY(0);
}

/* Override parent opacity effects completely */
.feedback-button .reasons-container.show,
.feedback-container .reasons-container.show,
.feedback-container:hover .reasons-container.show,
.feedback-button:hover .reasons-container.show {
    opacity: 1 !important;
}

/* Override any hover effects */
.feedback-button:hover .reasons-container.show {
    opacity: 1 !important;
}

.reason-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left; /* Ensure left alignment */
}

.reason-option:hover {
    background-color: #f5f5f5;
}

.reason-cancel {
    padding: 10px 15px;
    color: #666;
    text-align: center; /* Keep cancel button centered */
    border-top: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.reason-cancel:hover {
    background-color: #f5f5f5;
}

.selected-reason {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    margin-left: 5px;
    font-style: italic;
}

/* New content and feedback container */
.content-feedback-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    gap: 8px;
    width: 100%;
}

/* Adjust the bot message to allow space for feedback buttons */
.content-feedback-container .bot-message {
    flex: 1; /* Take up available space */
    margin-right: 8px; /* Add some space between message and buttons */
    width: auto; /* Override fixed width */
    max-width: calc(100% - 80px); /* Allow space for feedback buttons */
}

/* Action buttons styling */
.action-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
}

.action-button {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background-color: #f8f8f8;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

.action-button:hover {
    background-color: #f0f0f0;
    border-color: #d0d0d0;
}

.inquiry-button {
    background-color: #f7fff5;
    border-color: #d0ffd0;
    color: #16BB5B;
}

.inquiry-button:hover {
    background-color: #eaffea;
    border-color: #b8ffb8;
}

/* FAQ Buttons Styling */
.faq-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 5px 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center; /* Add this to center rows horizontally */
}

.faq-buttons-row {
    display: flex;
    gap: 8px;
    width: 80%;
    justify-content: center; /* Add this to center buttons within the row */
}

.faq-button {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 13px;
    border-radius: 20px;
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #000000;
    transition: all 0.3s ease; /* 부드러운 트랜지션 효과 추가 */
}

.faq-button:hover {
    background: linear-gradient(-84deg, var(--Blue-500, #16BB5B) -23.02%, var(--Green-700, #5197FF) 90.36%);
    border-color: #b8cfff;
    color: white; /* 텍스트 색상도 변경하여 가시성 향상 */
}

/* Drag and drop styles */
.drag-over {
    border: 2px dashed #007bff;
}

/* 문의 폼 이미지 업로드 스타일 */
.file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.file-upload-button {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-button:hover {
    background-color: #e5e7eb;
}

.file-info {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
}

.drag-drop-area {
    width: 100%;
    min-height: 100px;
    border: 2px dashed #e5e7eb;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f9fafb;
    transition: all 0.3s ease;
    cursor: pointer;
}

.drag-drop-area:hover,
.drag-drop-area.drag-over {
    border-color: #004aef;
    background-color: #f0f7ff;
}

.drag-drop-area p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.drag-drop-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.inquiry-image-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* 이미지 미리보기 관련 스타일 제거 */
.image-preview-container {
    display: none;  /* 미리보기 컨테이너 숨김 */
}

.image-preview {
    display: none;  /* 미리보기 항목 숨김 */
}

.delete-image {
    display: none;  /* 삭제 버튼 숨김 */
}

/* 입력 래퍼 스타일 수정 */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: white;
}

/* 1:1 문의 폼 스타일 */
.inquiry-form-container {
    width: 100%;
    padding: 20px;
}

.inquiry-form-title {
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #2C3E50;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-field label {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
}

.form-field .required {
    color: #e53e3e;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    font-family: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #3182ce;
    box-shadow: 0 0 0 1px #3182ce;
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.inquiry-submit-btn,
.inquiry-cancel-btn {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inquiry-submit-btn {
    background: linear-gradient(-84deg, var(--Blue-500, #16BB5B) -23.02%, var(--Green-700, #5197FF) 90.36%);
    color: white;
    border: none;
}

.inquiry-submit-btn:hover {
    background: linear-gradient(-84deg, var(--Blue-500, #16BB5B) -23.02%, var(--Green-700, #5197FF) 90.36%);
}

.inquiry-submit-btn:disabled {
    background-color: #a0aec0;
    cursor: not-allowed;
}

.inquiry-cancel-btn {
    background-color: white;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.inquiry-cancel-btn:hover {
    background-color: #f7fafc;
}

.inquiry-error {
    color: #e53e3e;
    font-size: 14px;
    margin-top: 10px;
}

/* 문의 폼 이미지 업로드 스타일 */
.file-upload-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.file-upload-button {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-button:hover {
    background-color: #e5e7eb;
}

.file-info {
    font-size: 12px;
    color: #6b7280;
}

.inquiry-image-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.inquiry-image-preview {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.inquiry-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-file-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 10px;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-delete-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 이미지 첨부 토글 라디오 버튼 스타일 */
.image-toggle-container {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.radio-option label {
    cursor: pointer;
    font-size: 14px;
    color: #4a5568;
}

/* 숨김 상태 클래스 */
.image-upload-section.hidden {
    display: none;
}

/* 돌아가기 버튼 스타일 */
.return-button {
    position: absolute;
    top: 45px;
    right: 25px;
    z-index: 10;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
    display: inline-block;
}

.return-button img {
    width: 150px;
    height: 50px;
    display: block;
    transition: opacity 0.2s ease;
}

.return-button:hover {
    opacity: 1;
}

/* 모바일 화면에서 버튼 위치 조정 */
@media (max-width: 768px) {
    .return-button {
        padding: 10px 0;
    }
}

/* Modal styles for conversation history */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background-color: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

/* Loading modal */
.loading-modal {
    padding: 30px;
    text-align: center;
}

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #1bb86a;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Add styles for a smaller spinner */
.loading-spinner.small {
    display: inline-block;
    width: 16px; /* Smaller size */
    height: 16px; /* Smaller size */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Lighter border for button */
    border-radius: 50%;
    border-top-color: #ffffff; /* White top border */
    animation: spin 0.8s ease-in-out infinite;
}

/* Conversation history items - updated styles */
.conversation-item {
    background-color: #9ca3af;
    border-radius: 15px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.conversation-item:hover {
    background-color: #8c949e;
}

.person-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: flex-start; /* Change from center to flex-start to move icon upward */
    justify-content: center;
    margin-right: 2px;
    margin-top: -10px; /* Added negative margin to move icon higher */
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.person-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.conversation-content {
    flex-grow: 1;
    overflow: hidden;
    margin-right: 24px; /* Space for arrow icon */
    margin-block: 8px;
}

.conversation-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    font-weight: 500;
}

.conversation-preview {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arrow-icon {
    position: absolute;
    right: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Remove unused styles */
.time-indicator,
.conversation-question,
.conversation-answer,
.continue-conversation-btn {
    display: none;
}

.empty-line {
    height: 1rem;
}

/* 새로운 채팅 시작 효과 */
.new-chat-transition {
    animation: newChatFadeIn 0.3s ease-out;
}

@keyframes newChatFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Event promotion styles - REDESIGNED */
.event-promotion-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;
    z-index: 10;
}

.event-promotion-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.event-promotion-container.animated-entry {
    animation: float 3s ease-in-out infinite;
}

.event-promotion-container.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Event card styling - modern card layout */
.event-card {
    width: 85%;
    max-width: 340px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FF 100%);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(71, 82, 255, 0.15), 0 6px 12px rgba(121, 128, 255, 0.1);
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.event-card:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 15px 35px rgba(71, 82, 255, 0.2), 0 10px 20px rgba(121, 128, 255, 0.15);
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    transform: translateX(-100%);
    z-index: 2;
}

.event-card:hover::before {
    animation: shine 1.5s ease-out;
}

.event-card-header {
    padding: 12px;
    background: linear-gradient(135deg, #FF6600 0%, #FF9900 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.event-label {
    color: white;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    margin-left: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.event-card-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 80%);
    animation: headerShine 3s infinite;
    z-index: 1;
}

.event-card-content {
    padding: 20px;
    text-align: center;
}

.event-emoji-container {
    margin: 0 auto 15px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFFAF0 0%, #FFF4E3 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.15);
}

.event-emoji {
    font-size: 36px;
    line-height: 1;
}

.event-bounce {
    animation: event-bounce 2s ease infinite;
}

.event-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.event-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.highlight-text {
    color: #FF6600;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 102, 0, 0.2);
    border-radius: 2px;
}

.event-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 15px;
    padding: 12px 22px;
    border: none;
    background: linear-gradient(135deg, #FF6600 0%, #FF9900 100%);
    color: white;
    font-weight: 600;
    font-size: 15px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.2);
    position: relative;
    overflow: hidden;
    width: 80%;
}

.event-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 102, 0, 0.3);
}

.event-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 102, 0, 0.2);
}

.event-cta-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background: linear-gradient(135deg, #FF6600, #FF9900, #FF6600);
    z-index: -1;
    animation: border-animation 2s linear infinite;
    border-radius: 30px;
}

.event-cta-text {
    margin-right: 8px;
}

.event-cta-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.event-cta-button:hover .event-cta-icon {
    transform: translateX(3px);
}

/* Enhanced event message styling */
.event-message {
    background-color: #FFFFFF !important;
    border: 1px solid #FFD699 !important;
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.1), 0 0 0 1px rgba(255, 153, 0, 0.05) !important;
    position: relative;
    overflow: hidden;
}

.premium-event-message {
    background: linear-gradient(135deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding-bottom: 20px !important;
}

.event-message-content {
    position: relative;
    z-index: 2;
}

.event-message-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
}

.event-message-title {
    font-size: 18px;
    font-weight: 700;
    color: #FF6600;
    text-align: center;
    position: relative;
    z-index: 2;
}

.event-confetti-left,
.event-confetti-right {
    position: absolute;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.8;
}

.event-confetti-left {
    left: -5px;
    transform: rotate(-30deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF6600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
}

.event-confetti-right {
    right: -5px;
    transform: rotate(30deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF9900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L14.85 8.35L22 9.24L16.7 14L17.77 21L12 17.5L6.23 21L7.3 14L2 9.24L9.15 8.35L12 2Z'%3E%3C/path%3E%3C/svg%3E");
}

.event-message-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.event-gift-image {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 12V22H4V12' stroke='%23FF6600' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 7H2V12H22V7Z' stroke='%23FF6600' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22V7' stroke='%23FF6600' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H7.5C6.83696 7 6.20107 6.73661 5.73223 6.26777C5.26339 5.79893 5 5.16304 5 4.5C5 3.83696 5.26339 3.20107 5.73223 2.73223C6.20107 2.26339 6.83696 2 7.5 2C11 2 12 7 12 7Z' stroke='%23FF6600' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H16.5C17.163 7 17.7989 6.73661 18.2678 6.26777C18.7366 5.79893 19 5.16304 19 4.5C19 3.83696 18.7366 3.20107 18.2678 2.73223C17.7989 2.26339 17.163 2 16.5 2C13 2 12 7 12 7Z' stroke='%23FF6600' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}

.event-gift-image::before,
.event-gift-image::after {
    content: '✨';
    position: absolute;
    font-size: 24px;
    opacity: 0.8;
}

.event-gift-image::before {
    top: 10px;
    left: -10px;
    animation: twinkle 2s ease infinite;
}

.event-gift-image::after {
    bottom: 10px;
    right: -10px;
    animation: twinkle 2s ease infinite 1s;
}

.event-description {
    text-align: center;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.event-description strong {
    color: #FF6600;
    font-weight: 700;
}

.event-prize, .event-period {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background-color: #FFF4E3;
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(255, 153, 0, 0.1);
}

.event-prize-label, .event-period-label {
    font-weight: 600;
    font-size: 14px;
    color: #FF6600;
    margin-right: 12px;
    flex-shrink: 0;
    min-width: 40px;
}

.event-prize-value, .event-period-value {
    font-size: 14px;
    color: #333;
}

.event-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.event-action-button {
    background: linear-gradient(135deg, #FF6600 0%, #FF9900 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600;
    padding: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.event-action-button:hover {
    background: linear-gradient(135deg, #FF7B2C 0%, #FFAA33 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 102, 0, 0.3) !important;
}

.pulse-effect {
    animation: pulse 2s infinite;
}

.button-icon {
    margin-right: 8px;
}

.event-cancel-button {
    background: #F0F2F5 !important;
    color: #666 !important;
    font-weight: 500;
}

.event-cancel-button:hover {
    background: #E8E8E8 !important;
    color: #444 !important;
}

/* Button click animation */
.event-action-button.button-clicked {
    transform: scale(0.95);
    background: linear-gradient(135deg, #F05800 0%, #F08800 100%) !important;
}

/* Confetti effect */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FFD700;
    border-radius: 2px;
    display: block;
    top: 0;
    opacity: 0;
    animation: confetti-fall 3s ease-in-out infinite, confetti-shake 2s ease-in-out infinite;
    z-index: 1;
}

.event-card-confetti {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 0;
    pointer-events: none;
}

/* Animation for bot response wrapper */
.bot-response-wrapper.event-animated {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.bot-response-wrapper.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animations */
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes headerShine {
    0% { transform: translateX(-100%); }
    30% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes event-bounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-8px); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(255, 102, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0); }
}

@keyframes border-animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1); }
}

@keyframes confetti-fall {
    0% { top: -10%; opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes confetti-shake {
    0% { transform: rotate(0deg) translate(0, 0); }
    25% { transform: rotate(90deg) translate(5px, 5px); }
    50% { transform: rotate(180deg) translate(0, 10px); }
    75% { transform: rotate(270deg) translate(-5px, 5px); }
    100% { transform: rotate(360deg) translate(0, 0); }
}