/* === 动画效果 === */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

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

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

/* 动画类 */
.animate-bounce { animation: bounce 1s infinite; }
.animate-fade-in-up { animation: fade-in-up 0.3s ease-out forwards; }
.animate-spin { animation: spin 1s linear infinite; }


/* Hide scrollbar while maintaining functionality - Dark Theme Update */
#chat-messages::-webkit-scrollbar, 
.modal-scrollable::-webkit-scrollbar,
#available-mentors-list::-webkit-scrollbar,
#modal-all-mentors::-webkit-scrollbar { /* Added for mentor selection */
  width: 8px;
}

#chat-messages::-webkit-scrollbar-track,
.modal-scrollable::-webkit-scrollbar-track,
#available-mentors-list::-webkit-scrollbar-track,
#modal-all-mentors::-webkit-scrollbar-track { /* Added for mentor selection */
  background: transparent; 
}

#chat-messages::-webkit-scrollbar-thumb,
.modal-scrollable::-webkit-scrollbar-thumb,
#available-mentors-list::-webkit-scrollbar-thumb,
#modal-all-mentors::-webkit-scrollbar-thumb { /* Added for mentor selection */
  background-color: #4b5563; /* gray-600 */
  border-radius: 4px;
  border: 2px solid transparent; 
  background-clip: content-box;
}
#chat-messages::-webkit-scrollbar-thumb:hover,
.modal-scrollable::-webkit-scrollbar-thumb:hover,
#available-mentors-list::-webkit-scrollbar-thumb:hover,
#modal-all-mentors::-webkit-scrollbar-thumb:hover { /* Added for mentor selection */
  background-color: #6b7280; /* gray-500 */
}


/* Auto-resizing textarea styling */
#message-input {
  min-height: 44px; 
  max-height: 150px;
  resize: none;
  font-family: system-ui, -apple-system, sans-serif;
}

#message-input:focus {
  transform: translateY(-1px);
}

/* Enhanced textarea for message input */
textarea.dark-input {
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Line clamp for truncating text */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Transitions for hover effects */
.transition-shadow {
  transition: box-shadow 0.3s ease;
}

.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.3s;
}


/* Prose styling for formatted text - Dark Theme Adjustments */
.prose {
  color: #d1d5db; /* gray-300 */
  max-width: 65ch;
  line-height: 1.75;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

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

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

.prose strong {
    color: #e5e7eb; /* gray-200 */
}

.prose ul > li::before {
    background-color: #60a5fa; /* sky-400 */
}

/* Custom gradient text for logo */
.text-logo-gradient {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-purple-500;
}

/* Frosted glass effect helper (apply to elements with a backdrop) */
.frosted-glass {
    @apply bg-opacity-70 backdrop-blur-md border border-slate-700;
}

/* Custom sidebar styling for active items */
.sidebar-link-active {
    @apply bg-sky-500/10 text-sky-400 border-l-4 border-sky-400;
}
.sidebar-link-active svg {
    @apply text-sky-400;
}

.sidebar-link-inactive {
    @apply text-slate-400 hover:bg-slate-700/50 hover:text-slate-200;
}
.sidebar-link-inactive svg {
    @apply text-slate-500 group-hover:text-slate-300;
}

/* Custom input styling for dark theme */
.dark-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(51, 65, 85, 0.6);
    border: 1px solid rgb(71, 85, 105);
    border-radius: 0.75rem;
    color: rgb(248, 250, 252);
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-input::placeholder {
    color: rgb(148, 163, 184);
    opacity: 0.8;
}

.dark-input:focus {
    outline: none;
    background-color: rgba(51, 65, 85, 0.8);
    border-color: rgb(56, 189, 248);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    color: rgb(255, 255, 255);
}

.dark-input:hover:not(:focus) {
    border-color: rgb(100, 116, 139);
    background-color: rgba(51, 65, 85, 0.7);
}

/* Search input specific styling */
input[type="text"].dark-input {
    height: 2.75rem;
}

/* Input with icon styling */
.relative .dark-input {
    padding-left: 2.5rem;
}
/* Custom checkbox styling */
.form-checkbox {
    @apply appearance-none print:appearance-none shrink-0 rounded border-slate-500 checked:bg-sky-500 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-sky-400 disabled:opacity-50 disabled:cursor-not-allowed;
}


/* Custom button styles */
.btn-primary {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgb(56, 189, 248), rgb(59, 130, 246));
    color: white;
    font-weight: 600;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 10px rgba(56, 189, 248, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.95rem;
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgb(14, 165, 233), rgb(37, 99, 235));
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 0 15px rgba(56, 189, 248, 0.3);
    transform: translateY(-1px);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3), 0 6px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:disabled {
    background: linear-gradient(135deg, rgb(100, 116, 139), rgb(71, 85, 105));
    color: rgb(148, 163, 184);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6;
}

.btn-primary:disabled:hover {
    background: linear-gradient(135deg, rgb(100, 116, 139), rgb(71, 85, 105));
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    @apply px-6 py-3 bg-slate-700 text-slate-200 font-semibold rounded-lg shadow-md hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-opacity-75 transition-all duration-150 ease-in-out transform active:scale-95;
}

.btn-outline {
    @apply px-6 py-3 bg-transparent text-sky-400 font-semibold rounded-lg border-2 border-sky-500 hover:bg-sky-500/10 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-opacity-75 transition-all duration-150 ease-in-out transform active:scale-95;
}

/* Enhanced card styling */
.cool-card {
    @apply bg-slate-800/80 backdrop-blur-md border border-slate-700 rounded-xl shadow-2xl shadow-slate-900/50 transition-all duration-300 ease-out;
}
.cool-card-hover:hover {
    @apply transform -translate-y-1 shadow-[0_10px_30px_-5px_rgba(0,0,0,0.2),_0_5px_15px_-5px_rgba(30,150,243,0.2)];
}

/* Specific styles for conversation page elements */
.chat-header {
    @apply bg-slate-800/80 backdrop-blur-md border-b border-slate-700;
}

.chat-bubble-user {
    @apply bg-gradient-to-br from-sky-500 to-sky-600 text-white shadow-md;
}

.chat-bubble-mentor {
    @apply bg-slate-700/90 backdrop-blur-sm text-slate-100 border border-slate-600/50;
}

/* 流式输出相关样式 */
.streaming-cursor {
    animation: blink 1s infinite;
}

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

/* 聊天容器优化 */
#chat-messages {
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

/* 确保消息从顶部开始显示 */
.chat-messages-container {
    padding-bottom: 1rem;
}

/* 响应式聊天气泡 */
@media (max-width: 640px) {
    .chat-bubble-user, .chat-bubble-mentor {
        max-width: 90% !important;
    }
}

/* 优化打字指示器 */
.typing-indicator {
    animation: fade-in-up 0.3s ease-out;
}

/* 聊天消息间距优化 */
.chat-messages-container > div:last-child {
    margin-bottom: 2rem;
}

/* Ensure Tailwind applies styles - this is useful if Tailwind JIT is missing something initially */
body {
    @apply antialiased;
}

/* Modal backdrop for dark theme */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop.hidden {
    display: none !important;
}

.modal-backdrop.flex {
    display: flex !important;
}

/* Modal content for dark theme */
.modal-content-dark {
    background-color: rgb(30, 41, 59);
    border: 1px solid rgb(51, 65, 85);
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 50;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-scrollable {
    overflow-y: auto;
    max-height: calc(95vh - 120px);
}

/* 多导师对话样式 */
.multi-mentor-response {
    position: relative;
}

.streaming-mentor-message {
    animation: mentorSlideIn 0.5s ease-out;
}

.streaming-mentor-message:not(:first-child) {
    margin-top: 1rem;
}

/* 导师消息进入动画 */
@keyframes mentorSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 导师头像悬浮效果 */
.multi-mentor-response img {
    transition: all 0.3s ease;
}

.multi-mentor-response img:hover {
    transform: scale(1.1);
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

/* 导师名称样式增强 */
.multi-mentor-response .text-sky-400 {
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 流式光标样式 */
.streaming-cursor {
    animation: cursorBlink 1s infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .streaming-mentor-message:not(:first-child) {
        margin-top: 0.75rem;
    }
}

/* 对话标签和总结样式 */
.conversation-tag {
    transition: all 0.2s ease;
}

.conversation-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.complexity-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.complexity-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ai-summary-panel {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(59, 130, 246, 0.05));
    border: 1px solid rgba(14, 165, 233, 0.2);
    backdrop-filter: blur(10px);
}

.tag-category-problem {
    background: rgba(239, 68, 68, 0.1);
    color: rgb(252, 165, 165);
    border-color: rgba(239, 68, 68, 0.3);
}

.tag-category-topic {
    background: rgba(59, 130, 246, 0.1);
    color: rgb(147, 197, 253);
    border-color: rgba(59, 130, 246, 0.3);
}

.tag-category-auto {
    background: rgba(147, 51, 234, 0.1);
    color: rgb(196, 181, 253);
    border-color: rgba(147, 51, 234, 0.3);
}

.tag-category-sentiment {
    background: rgba(16, 185, 129, 0.1);
    color: rgb(167, 243, 208);
    border-color: rgba(16, 185, 129, 0.3);
}

.tag-category-complexity {
    background: rgba(245, 158, 11, 0.1);
    color: rgb(252, 211, 77);
    border-color: rgba(245, 158, 11, 0.3);
}

/* 文本截断样式 */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 对话分析面板样式 */
.conversation-analysis-panel {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
    border: 1px solid rgba(100, 116, 139, 0.3);
    backdrop-filter: blur(10px);
}

.analysis-section {
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.analysis-section:last-child {
    margin-bottom: 0;
}

/* 标签动画效果 */
@keyframes tagFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.conversation-tag {
    animation: tagFadeIn 0.3s ease-out;
}

/* 复杂度指示器样式 */
.complexity-level-1 { background-color: #10B981; }
.complexity-level-2 { background-color: #10B981; }
.complexity-level-3 { background-color: #F59E0B; }
.complexity-level-4 { background-color: #EF4444; }
.complexity-level-5 { background-color: #EF4444; }