/* 메인 채팅 공통 스타일 */
.sidebar-chat {
    background-color: #141517;
}

/* 모든 페이지에서 채팅 높이 고정 (기본) */
.main-chat-container {
    height: 350px;
    max-height: 350px;
    overflow-y: auto;
}

/* 사이드바용 메인 채팅 높이 (PC) - 하위 호환성 유지 */
.sidebar .main-chat-container,
.sidebar-chat .main-chat-container {
    height: 350px;
    max-height: 350px;
}

/* 모바일 모달용 메인 채팅 높이 */
#mobileChatModal .main-chat-container {
    height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
}

/* 채팅 메시지 슬라이드 애니메이션 */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message-slide-in {
    animation: slideInFromBottom 0.3s ease-out;
}

/* 모바일 채팅 버튼 펄스 효과 (새 메시지 시) */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.pulse-animation {
    animation: pulse 1s infinite;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4a4a4a;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #717171;
}

/* Firefox 스크롤바 */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
}

/* 채팅 입력창 포커스 스타일 */
#mainMessageInput:focus {
    outline: none;
    border-color: #ea580c;
}

/* 모바일 모달 배경 블러 효과 (선택적) */
#mobileChatModal {
    backdrop-filter: blur(2px);
}

/* 채팅 버튼 호버 효과 */
#mobileChatToggle:active {
    transform: scale(0.95);
}

/* 반응형: 태블릿 */
@media (max-width: 1024px) {
    .sidebar .main-chat-container {
        display: none;
    }
}

/* 반응형: 모바일 */
@media (max-width: 640px) {
    #mobileChatModal .main-chat-container {
        height: calc(100vh - 180px);
    }

    #mainMessageInput {
        font-size: 16px; /* iOS 자동 줌 방지 */
    }
}