traveler/LaneTexture/unpackage/dist/dev/mp-weixin/pages/ai-assistant/index.wxss

@font-face {
		font-family: 'iconfont';
		src: url('//at.alicdn.com/t/font_1234567_abcdefg.eot');
}
.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #e6f6ff;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		padding-top: 0; /* 移除顶部padding */
		padding-bottom: 120rpx; /* 为底部输入框留出空间 */
		box-sizing: border-box;
}
	
	/* 底部留白 */
.bottom-space {
		height: 120rpx;
}
	
	/* 合并后的顶部区域 */
.header-combined {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 110;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.left-section {
		flex: 1;
		display: flex;
		align-items: center;
}
.middle-section {
		flex: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
}
.right-section {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 10rpx;
}
.logo-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 5rpx;
}
.logo-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
}
.main-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #3a9eeb;
}
.sub-title {
		font-size: 24rpx;
		color: #666;
}
.back-btn {
		display: flex;
		align-items: center;
		padding: 16rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 153, 255, 0.08);
		transition: all 0.2s ease;
}
.back-btn:active {
		background-color: rgba(0, 153, 255, 0.15);
}
.back-icon {
		font-size: 32rpx;
		color: #0099ff;
		font-weight: bold;
		margin-right: 5rpx;
}
.back-text {
		font-size: 28rpx;
		color: #0099ff;
		font-weight: 500;
}
.test-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		border-radius: 30rpx;
		background-color: rgba(255, 193, 7, 0.1);
		transition: all 0.2s ease;
}
.test-btn:active {
		background-color: rgba(255, 193, 7, 0.2);
}
.test-text {
		font-size: 24rpx;
		color: #ffc107;
		font-weight: 500;
}
.console-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		border-radius: 30rpx;
		background-color: rgba(255, 193, 7, 0.1);
		transition: all 0.2s ease;
}
.console-btn:active {
		background-color: rgba(255, 193, 7, 0.2);
}
.console-text {
		font-size: 24rpx;
		color: #ffc107;
		font-weight: 500;
}
.new-chat-btn {
		display: flex;
		align-items: center;
		color: #0099ff;
		padding: 10rpx 16rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 153, 255, 0.08);
		transition: all 0.2s ease;
}
.new-chat-btn:active {
		background-color: rgba(0, 153, 255, 0.15);
}
.new-chat-icon {
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 5rpx;
		color: #0099ff;
}
.new-chat-text {
		font-size: 24rpx;
		color: #0099ff;
		font-weight: 500;
}
	
	/* 聊天头部 */
.chat-header {
		padding: 20rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.8);
		border-bottom: 1px solid #f0f0f0;
		margin-top: 120rpx; /* 调整顶部边距，为合并后的标题栏留出空间 */
		margin-bottom: 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 90;
}
.assistant-name {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
}
.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #4facfe;
		border-radius: 50%;
		margin-right: 10rpx;
}
	
	/* 消息容器 */
.message-container {
		flex: 1;
		margin-top: 180rpx; /* 调整顶部边距，为合并后的标题栏和聊天头部留出空间 */
		padding-bottom: 120rpx; /* 为底部输入框留出空间 */
}
	
	/* 消息列表 */
.message-list {
		width: 100%;
		height: calc(100vh - 400rpx); /* 调整高度 */
		padding: 20rpx;
		box-sizing: border-box;
}
	
	/* 欢迎消息容器样式 */
.welcome-container {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}
.welcome-message {
		display: flex;
		padding: 30rpx;
}
.welcome-message .avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15rpx;
		border: 2rpx solid #f5f5f5;
		flex-shrink: 0;
}
.welcome-message .message-bubble {
		background-color: transparent;
		box-shadow: none;
		padding: 0;
		color: #333;
		line-height: 1.6;
		flex: 1;
}
	
	/* 快捷问题 */
.quick-questions {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.03);
}
.quick-question {
		background-color: #f8fbfe;
		padding: 24rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		display: flex;
		align-items: center;
		position: relative;
}
.dot-marker {
		width: 15rpx;
		height: 15rpx;
		background-color: #72cbff;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
}
.question-text {
		flex: 1;
		font-weight: 500;
		color: #333;
}
.arrow-icon {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(114, 203, 255, 0.1);
		flex-shrink: 0;
		color: #72cbff;
}
.arrow-icon text {
		color: #72cbff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 1;
}
.message-item {
		margin-bottom: 30rpx;
		animation: fadeIn 0.3s ease;
}
.message-header {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
}
.message-time {
		font-size: 22rpx;
		color: #999;
		margin-right: 10rpx;
}
.message-role {
		font-size: 22rpx;
		color: #666;
}
.message-content {
		display: flex;
		align-items: flex-start;
		padding: 0 20rpx;
}
.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15rpx;
		border: 2rpx solid #f5f5f5;
}
.avatar image {
		width: 100%;
		height: 100%;
}
.message-bubble {
		max-width: 70%;
		padding: 30rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		line-height: 1.6;
		position: relative;
		word-break: break-word;
}
.message-bubble rich-text {
		line-height: 1.6;
}
.message-bubble b {
		color: #0099ff;
		font-weight: 600;
}
.message-bubble span {
		display: inline-block;
		margin: 0 4rpx;
}
.user .message-content {
		flex-direction: row-reverse;
}
.user .avatar {
		margin-right: 0;
		margin-left: 15rpx;
}
.user .message-bubble {
		background: linear-gradient(135deg, #72cbff 0%, #5bb8eb 100%);
		color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		line-height: 1.6;
}
.ai .message-bubble {
		background-color: #fff;
		color: #333;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
		padding: 30rpx;
		line-height: 1.6;
		border-radius: 16rpx;
}
.ai .message-bubble rich-text {
		color: #333;
		line-height: 1.6;
}
.ai .message-bubble rich-text ol,
	.ai .message-bubble rich-text ul {
		padding-left: 40rpx;
		margin: 10rpx 0;
}
.ai .message-bubble rich-text ol li,
	.ai .message-bubble rich-text ul li {
		margin: 10rpx 0;
}
	
	/* 思考中动画 */
.thinking-dots {
		display: flex;
		align-items: center;
		height: 40rpx;
}
.thinking-dots text {
		font-size: 40rpx;
		animation: thinking 1s infinite;
		margin: 0 2rpx;
		color: #666;
}
.thinking-dots text:nth-child(2) {
		animation-delay: 0.2s;
}
.thinking-dots text:nth-child(3) {
		animation-delay: 0.4s;
}
@keyframes thinking {
0%, 100% { 
			opacity: 0.3;
			transform: translateY(0);
}
50% { 
			opacity: 1;
			transform: translateY(-4rpx);
}
}
	
	/* 输入区域 */
.input-area {
		display: flex;
		padding: 15rpx 20rpx;
		background-color: #ffffff;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
}
.message-input {
		flex: 1;
		height: 70rpx;
		background-color: #f5f7fa;
		border-radius: 35rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
}
.send-btn {
		width: 140rpx;
		height: 70rpx;
		background-color: #72cbff;
		color: #ffffff;
		border-radius: 35rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
}
.send-btn:active {
		background-color: #5bb8eb;
}
.send-btn[disabled] {
		background-color: #cccccc;
		color: #ffffff;
}
@keyframes fadeIn {
from { 
			opacity: 0;
			transform: translateY(10rpx);
}
to { 
			opacity: 1;
			transform: translateY(0);
}
}

	/* 系统消息样式 */
.system .message-bubble {
		background-color: rgba(0, 0, 0, 0.05);
		color: #666;
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx auto;
		max-width: 80%;
		border-radius: 30rpx;
}
.system .avatar {
		display: none;
}
.system .message-header {
		justify-content: center;
}
	
	/* 旅行计划卡片样式 */
.travel-plan-card {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		width: 100%;
		margin: 20rpx 0;
}
.travel-plan-header {
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
}
.plan-logo text {
		font-size: 32rpx;
		font-weight: bold;
		color: #4cd964;
}
.travel-plan-basic {
		padding: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.travel-plan-title {
		margin-bottom: 20rpx;
}
.travel-plan-title text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
}
.travel-plan-desc {
		margin-bottom: 20rpx;
		color: #666;
		line-height: 1.5;
}
.travel-plan-feature {
		margin-bottom: 20rpx;
		color: #333;
		line-height: 1.5;
}
.travel-plan-price {
		font-weight: bold;
		color: #72cbff;
		font-size: 32rpx;
}
.travel-plan-price text:last-child {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
		font-weight: normal;
}
.travel-plan-schedule {
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
}
.calendar-indicator {
		background-color: #ff6b6b;
		color: #fff;
		width: 60rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		margin-right: 20rpx;
}
.calendar-indicator .month {
		font-size: 20rpx;
		line-height: 1;
}
.calendar-indicator .day {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 1.2;
}
.schedule-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
}
.day-indicator {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #f8fbff;
}
.pin-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
		color: #72cbff;
}
.day-text {
		font-size: 32rpx;
		color: #72cbff;
		font-weight: bold;
}
.travel-details {
		padding: 20rpx 30rpx;
		background-color: #fff;
}
.detail-item {
		margin-bottom: 20rpx;
		display: flex;
}
.detail-label {
		color: #72cbff;
		font-size: 28rpx;
		font-weight: bold;
		width: 180rpx;
		flex-shrink: 0;
}
.detail-value {
		color: #333;
		font-size: 28rpx;
		line-height: 1.5;
		flex: 1;
}
.travel-footer {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #f0f0f0;
}
.footer-item {
		text-align: center;
		background-color: #f8f8f8;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
}
.footer-item text {
		font-size: 24rpx;
		color: #666;
}
.travel-note {
		padding: 20rpx 30rpx;
		background-color: #f8fbff;
		border-top: 1px solid #f0f0f0;
}
.note-label {
		color: #72cbff;
		font-weight: bold;
		font-size: 28rpx;
		margin-right: 10rpx;
}
.note-content {
		color: #666;
		font-size: 28rpx;
		line-height: 1.5;
}

	/* 格式化样式 */
.md-heading {
		color: #0077e6;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
}
h1.md-heading {
		font-size: 36rpx;
		margin: 24rpx 0 12rpx 0;
}
h2.md-heading {
		font-size: 32rpx;
		margin: 20rpx 0 10rpx 0;
}
h3.md-heading {
		font-size: 30rpx;
		margin: 16rpx 0 8rpx 0;
}
.enhanced-title {
		display: flex;
		align-items: center;
		margin: 30rpx 0 20rpx 0;
		background-color: #f8fbff;
		padding: 16rpx 20rpx;
		border-radius: 10rpx;
}
.title-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
		line-height: 1;
}
.title-text {
		font-size: 32rpx;
		color: #0077e6;
		font-weight: bold;
}
.enhanced-list-item {
		display: flex;
		align-items: flex-start;
		margin: 16rpx 0;
		padding-left: 10rpx;
}
.item-bullet {
		width: 12rpx;
		height: 12rpx;
		background-color: #72cbff;
		border-radius: 50%;
		margin: 14rpx 15rpx 0 0;
		flex-shrink: 0;
}
.spot-name {
		color: #0077e6;
		font-weight: bold;
}
.bracket-title {
		color: #0077e6;
		font-weight: bold;
}
.price-highlight {
		color: #ff6b6b;
		font-weight: bold;
}
.day-highlight {
		color: #0099ff;
		font-weight: bold;
}
.time-highlight {
		color: #0099ff;
		font-weight: bold;
}
.keyword-highlight {
		color: #ff9500;
		font-weight: bold;
}