diff --git "a/static/css/style.css" "b/static/css/style.css" new file mode 100644--- /dev/null +++ "b/static/css/style.css" @@ -0,0 +1,5098 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + /* Enhanced Color Palette */ + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --primary-light: #818cf8; + --secondary-color: #ec4899; + --secondary-dark: #db2777; + --accent-color: #06b6d4; + --accent-dark: #0891b2; + --background-dark: #0f172a; + --background-light: #1e293b; + --surface-color: #334155; + --surface-light: #475569; + --text-primary: #ffffff; + --text-secondary: #cbd5e1; + --text-muted: #94a3b8; + --text-inverse: #1e293b; + --border-color: #475569; + --border-light: #64748b; + --success-color: #10b981; + --warning-color: #f59e0b; + --error-color: #ef4444; + --info-color: #3b82f6; + + /* Gradients */ + --gradient-primary: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); + --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); + --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%); + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3); + + /* Animations */ + --transition-fast: 0.2s ease-in-out; + --transition-normal: 0.3s ease-in-out; + --transition-slow: 0.5s ease-in-out; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--background-dark); + color: var(--text-primary); + line-height: 1.6; + overflow-x: hidden; +} + +/* Background Animation */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: + radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(6, 182, 212, 0.05) 0%, transparent 50%); + z-index: -1; + animation: backgroundPulse 20s ease-in-out infinite; +} + +@keyframes backgroundPulse { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 0.6; } +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-color); + z-index: 1000; + transition: var(--transition-normal); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; +} + +.nav-brand { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + transition: var(--transition-fast); +} + +.nav-brand:hover { + transform: translateY(-1px); +} + +.brand-icon { + width: 40px; + height: 40px; + border-radius: 12px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-glow); +} + +.brand-icon i { + color: white; + font-size: 1.2rem; +} + +.brand-text { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.brand-name { + font-size: 1.25rem; + font-weight: 700; + color: var(--text-primary); + line-height: 1.2; +} + +.brand-tagline { + font-size: 0.75rem; + color: var(--text-muted); + font-weight: 500; +} + +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-link { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + color: var(--text-secondary); + text-decoration: none; + border-radius: 8px; + transition: var(--transition-fast); + font-weight: 500; +} + +.nav-link:hover, +.nav-link.active { + color: var(--text-primary); + background: rgba(99, 102, 241, 0.15); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); +} + +.nav-link.active { + position: relative; +} + +.nav-link.active::after { + content: ''; + position: absolute; + bottom: -1px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 2px; + background: var(--gradient-primary); + border-radius: 2px; +} + +.chat-indicator { + position: absolute; + top: -2px; + right: -2px; + width: 8px; + height: 8px; + background: var(--success-color); + border-radius: 50%; + display: none; +} + +.chat-indicator.active { + display: block; + animation: pulse 2s infinite; +} + +.status-indicator { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 20px; + border: 1px solid var(--border-color); +} + +.status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--success-color); + animation: pulse 2s infinite; +} + +.status-text { + font-size: 0.875rem; + color: var(--text-secondary); + font-weight: 500; +} + +/* Main Container */ +.main-container { + margin-top: 70px; + padding: 2rem; + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + +/* Hero Section */ +.hero { + position: relative; + text-align: center; + padding: 6rem 0; + margin-bottom: 4rem; + overflow: hidden; +} + +.hero-background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +.floating-shapes { + position: absolute; + width: 100%; + height: 100%; +} + +.shape { + position: absolute; + border-radius: 50%; + opacity: 0.1; + animation: float 6s ease-in-out infinite; +} + +.shape-1 { + width: 80px; + height: 80px; + background: var(--primary-color); + top: 20%; + left: 10%; + animation-delay: 0s; +} + +.shape-2 { + width: 60px; + height: 60px; + background: var(--secondary-color); + top: 60%; + right: 15%; + animation-delay: 2s; +} + +.shape-3 { + width: 100px; + height: 100px; + background: var(--accent-color); + bottom: 20%; + left: 20%; + animation-delay: 4s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(180deg); } +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(99, 102, 241, 0.1); + border: 1px solid rgba(99, 102, 241, 0.2); + border-radius: 20px; + color: var(--primary-light); + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 2rem; + animation: fadeInUp 0.8s ease-out; +} + +.hero-cta { + display: flex; + gap: 1rem; + justify-content: center; + margin: 2rem 0 3rem 0; + flex-wrap: wrap; +} + +.cta-button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 2rem; + border: none; + border-radius: 12px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; + transition: var(--transition-normal); + text-decoration: none; + min-width: 160px; + justify-content: center; +} + +.cta-button.primary { + background: var(--gradient-primary); + color: white; + box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); +} + +.cta-button.primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); +} + +.cta-button.secondary { + background: transparent; + color: var(--text-primary); + border: 2px solid var(--border-color); +} + +.cta-button.secondary:hover { + background: rgba(255, 255, 255, 0.05); + border-color: var(--primary-color); + transform: translateY(-2px); +} + +.hero-title { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1rem; + line-height: 1.2; +} + +.gradient-text { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradientShift 3s ease-in-out infinite; +} + +@keyframes gradientShift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.hero-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 4rem; + max-width: 1000px; + margin-left: auto; + margin-right: auto; +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 16px; + border: 1px solid var(--border-color); + transition: var(--transition-normal); + backdrop-filter: blur(10px); +} + +.feature-item:hover { + transform: translateY(-4px); + background: rgba(255, 255, 255, 0.08); + border-color: var(--primary-color); + box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2); +} + +.feature-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); +} + +.feature-icon i { + color: white; + font-size: 1.25rem; +} + +.feature-content { + flex: 1; +} + +.feature-content h3 { + color: var(--text-primary); + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 0.5rem; + line-height: 1.3; +} + +.feature-content p { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.5; +} + +.feature-item i { + font-size: 1.5rem; + color: var(--primary-color); +} + +/* Sections */ +.section { + display: none; + animation: fadeInUp 0.6s ease-out; +} + +.section.active { + display: block; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-header h2 { + font-size: 2.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.section-header p { + font-size: 1.1rem; + color: var(--text-secondary); +} + +/* Buttons */ +.btn-primary, +.btn-secondary { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-weight: 500; + text-decoration: none; + cursor: pointer; + transition: var(--transition-fast); + font-size: 1rem; +} + +.btn-primary { + background: var(--gradient-primary); + color: white; + box-shadow: var(--shadow-md); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg), var(--shadow-glow); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border: 1px solid var(--border-color); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.15); + border-color: var(--primary-color); + transform: translateY(-2px); +} + +/* Search Section */ +.search-container { + max-width: 800px; + margin: 0 auto; +} + +.search-box { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.search-box input { + flex: 1; + padding: 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-primary); + font-size: 1rem; + transition: var(--transition-fast); +} + +.search-box input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +.search-box input::placeholder { + color: var(--text-muted); +} + +/* Upload Section */ +.upload-container { + max-width: 800px; + margin: 0 auto; +} + +.upload-zone { + border: 2px dashed var(--border-color); + border-radius: 12px; + padding: 3rem; + text-align: center; + background: rgba(255, 255, 255, 0.02); + transition: var(--transition-normal); + margin-bottom: 2rem; +} + +.upload-zone:hover, +.upload-zone.drag-over { + border-color: var(--primary-color); + background: rgba(99, 102, 241, 0.05); +} + +.upload-content i { + font-size: 3rem; + color: var(--primary-color); + margin-bottom: 1rem; +} + +.upload-content h3 { + font-size: 1.5rem; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.upload-content p { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.url-input-container { + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 2rem; + border: 1px solid var(--border-color); +} + +.url-input-container h3 { + margin-bottom: 1rem; + color: var(--text-primary); +} + +.url-input-box { + display: flex; + gap: 1rem; +} + +.url-input-box input { + flex: 1; + padding: 0.75rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-primary); + font-size: 1rem; +} + +.url-input-box input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); +} + +/* My Papers Section */ +.mypapers-hero { + text-align: center; + padding: 3rem 0 2rem; +} + +.mypapers-hero-content { + max-width: 800px; + margin: 0 auto; +} + +.mypapers-title-area { + margin-bottom: 2rem; +} + +.mypapers-icon-large { + width: 80px; + height: 80px; + margin: 0 auto 1.5rem; + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: white; +} + +.mypapers-hero h1 { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, var(--text-primary), var(--accent-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 1rem; +} + +.mypapers-hero p { + font-size: 1.1rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; +} + +.mypapers-actions { + display: flex; + gap: 1rem; + justify-content: center; + margin-top: 2rem; +} + +.refresh-papers-btn, .clear-all-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 10px; + font-size: 0.95rem; + font-weight: 500; + cursor: pointer; + transition: var(--transition-normal); +} + +.refresh-papers-btn { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: white; +} + +.refresh-papers-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); +} + +.clear-all-btn { + background: rgba(239, 68, 68, 0.1); + color: #ef4444; + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.clear-all-btn:hover { + background: rgba(239, 68, 68, 0.2); + transform: translateY(-2px); +} + +.mypapers-content { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +.mypapers-loading { + text-align: center; + padding: 3rem; +} + +.mypapers-loading .loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(255, 255, 255, 0.1); + border-top: 3px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1rem; +} + +.mypapers-empty { + text-align: center; + padding: 4rem 2rem; +} + +.empty-state { + max-width: 400px; + margin: 0 auto; +} + +.empty-icon { + width: 80px; + height: 80px; + margin: 0 auto 1.5rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: var(--text-secondary); +} + +.empty-state h3 { + font-size: 1.5rem; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.empty-state p { + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.empty-actions { + display: flex; + gap: 1rem; + justify-content: center; +} + +.papers-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 1.5rem; + padding: 2rem 0; +} + +.paper-card-mypapers { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 1.5rem; + transition: var(--transition-normal); + cursor: pointer; + position: relative; + overflow: hidden; +} + +.paper-card-mypapers::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); +} + +.paper-card-mypapers:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); + border-color: rgba(99, 102, 241, 0.3); +} + +.paper-card-header { + display: flex; + align-items: flex-start; + gap: 1rem; + margin-bottom: 1rem; +} + +.paper-card-icon { + width: 40px; + height: 40px; + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + color: white; + flex-shrink: 0; +} + +.paper-card-content { + flex: 1; + min-width: 0; +} + +.paper-card-title { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.5rem; + line-height: 1.4; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.paper-card-meta { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + margin-bottom: 1rem; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.paper-card-meta span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.paper-card-actions { + display: flex; + gap: 0.5rem; +} + +.paper-action-btn { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.6rem 1rem; + border: none; + border-radius: 8px; + font-size: 0.85rem; + font-weight: 500; + cursor: pointer; + transition: var(--transition-normal); +} + +.paper-action-btn.primary { + background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); + color: white; +} + +.paper-action-btn.primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3); +} + +.paper-action-btn.secondary { + background: rgba(255, 255, 255, 0.05); + color: var(--text-primary); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.paper-action-btn.secondary:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateY(-2px); +} + +.paper-action-btn.danger { + background: rgba(239, 68, 68, 0.1); + color: #ef4444; + border: 1px solid rgba(239, 68, 68, 0.3); +} + +.paper-action-btn.danger:hover { + background: rgba(239, 68, 68, 0.2); +} + +/* Chat Section */ +.chat-container { + background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + overflow: hidden; + backdrop-filter: blur(10px); + display: flex; + flex-direction: column; + height: 75vh; + max-height: 800px; +} + +.chat-header { + flex-shrink: 0; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem 2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03); +} + +.chat-title { + display: flex; + align-items: center; + gap: 1rem; +} + +.chat-icon { + background: linear-gradient(135deg, #10b981, #06d6a0); + padding: 1rem; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; +} + +.chat-icon i { + font-size: 1.5rem; + color: white; +} + +.chat-title-text h3 { + color: #ffffff; + font-size: 1.5rem; + font-weight: 600; + margin: 0 0 0.5rem 0; +} + +.chat-title-text p { + color: #8b949e; + margin: 0; + font-size: 0.95rem; +} + +.chat-status .status-indicator.online .status-dot { + background: #10b981; +} + +.chat-messages-container { + flex-grow: 1; + padding: 2rem; + overflow-y: auto; + display: flex; + flex-direction: column; + max-width: 1000px; + margin: 0 auto; +} + +/* Custom Scrollbar */ +.chat-messages-container::-webkit-scrollbar { + width: 8px; +} + +.chat-messages-container::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +.chat-messages-container::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 4px; +} + +.chat-messages-container::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.3); +} + +.welcome-avatar { + position: relative; + flex-shrink: 0; +} + +.avatar-icon { + background: linear-gradient(135deg, #10b981, #06d6a0); + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.avatar-icon i { + font-size: 1.5rem; + color: white; +} + +.avatar-status { + position: absolute; + bottom: 2px; + right: 2px; + width: 14px; + height: 14px; + background: #10b981; + border: 2px solid #0f172a; + border-radius: 50%; +} + +.welcome-content h4 { + color: #ffffff; + font-size: 1.2rem; + margin: 0 0 0.75rem 0; +} + +.chat-input-area { + flex-shrink: 0; + padding: 1rem 2rem 1.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.2); +} + +.quick-questions-chips { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; + justify-content: center; +} + +.quick-question-chip { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #e6edf3; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s ease; +} + +.quick-question-chip:hover { + background: rgba(124, 58, 237, 0.3); + border-color: #7c3aed; + color: #fff; + transform: translateY(-2px); +} + +.chat-input-container .input-wrapper { + display: flex; + align-items: center; + gap: 0.75rem; + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + padding: 0.5rem 0.5rem 0.5rem 1rem; + border: 1px solid rgba(255, 255, 255, 0.15); + transition: all 0.2s ease; +} + +.chat-input-container .input-wrapper:focus-within { + border-color: #7c3aed; + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); +} + +.chat-input-container textarea { + flex-grow: 1; + background: transparent; + border: none; + color: #fff; + font-size: 1rem; + resize: none; + padding: 0.5rem 0; + max-height: 120px; + line-height: 1.5; +} + +.chat-input-container textarea:focus { + outline: none; +} + +.chat-input-container .send-btn-panel { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 8px; + font-size: 1rem; +} + +/* --- Chat Bubble Styles --- */ +.chat-message { + display: flex; + margin-bottom: 1.5rem; + max-width: 80%; + animation: messageSlideIn 0.3s ease-out; +} + +@keyframes messageSlideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.message-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + flex-shrink: 0; +} + +.message-bubble { + padding: 0.75rem 1.25rem; + border-radius: 18px; + position: relative; + line-height: 1.6; +} + +.message-content p { + margin: 0; + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-meta { + font-size: 0.75rem; + color: #8b949e; + padding-top: 0.5rem; +} + +/* Assistant Bubble */ +.chat-message.assistant { + align-self: flex-start; +} + +.chat-message.assistant .message-avatar { + background: linear-gradient(135deg, #10b981, #06d6a0); + color: white; + margin-right: 1rem; +} + +.chat-message.assistant .message-bubble { + background: #1f2937; + border: 1px solid #374151; + border-top-left-radius: 4px; + color: #e6edf3; +} + +/* User Bubble */ +.chat-message.user { + align-self: flex-end; + flex-direction: row-reverse; + margin-left: auto; +} + +.chat-message.user .message-avatar { + background: linear-gradient(135deg, #7c3aed, #a855f7); + color: white; + margin-left: 1rem; +} + +.chat-message.user .message-bubble { + background: #4338ca; + color: #e0e7ff; + border-top-right-radius: 4px; +} + +.chat-message.user .message-meta { + text-align: right; + color: #c7d2fe; +} + +/* Typing Indicator */ +.typing-indicator { + display: flex; + align-items: center; + margin-bottom: 1.5rem; + max-width: 80%; + align-self: flex-start; +} + +.typing-indicator .message-bubble { + padding: 0.75rem 1.25rem; + background: #1f2937; + border: 1px solid #374151; + border-radius: 18px; + border-top-left-radius: 4px; +} + +.typing-dots { + display: flex; + gap: 0.3rem; + align-items: center; +} + +.typing-dots .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #9ca3af; + animation: typingAnimation 1.4s infinite ease-in-out both; +} +.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; } +.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; } +.typing-dots .dot:nth-child(3) { animation-delay: 0s; } + +@keyframes typingAnimation { + 0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; } + 40% { transform: scale(1.0); opacity: 1; } +} + +.chat-messages-container { + display: flex; + flex-direction: column; +} + +/* Results Container */ +.results-container { + margin-top: 2rem; +} + +.paper-card, +.result-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1rem; + transition: var(--transition-normal); +} + +.paper-card:hover, +.result-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + border-color: var(--primary-color); +} + +.paper-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.paper-authors { + color: var(--text-secondary); + margin-bottom: 0.5rem; + font-size: 0.9rem; +} + +.paper-meta { + display: flex; + gap: 1rem; + margin-bottom: 1rem; + font-size: 0.85rem; + color: var(--text-muted); +} + +.paper-summary { + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 1rem; +} + +.paper-actions { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.paper-actions .btn-primary, +.paper-actions .btn-secondary { + padding: 0.5rem 1rem; + font-size: 0.875rem; +} + +/* Loading Overlay */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(15, 23, 42, 0.9); + display: none; + align-items: center; + justify-content: center; + z-index: 9999; + backdrop-filter: blur(5px); +} + +.loading-overlay.active { + display: flex; +} + +.loading-content { + text-align: center; + color: var(--text-primary); +} + +.loading-spinner { + width: 50px; + height: 50px; + border: 3px solid var(--border-color); + border-top: 3px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin: 0 auto 1rem; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Toast Notifications */ +.toast-container { + position: fixed; + top: 90px; + right: 20px; + z-index: 10000; +} + +.toast { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + padding: 1rem 1.5rem; + border-radius: 8px; + margin-bottom: 0.5rem; + border-left: 4px solid var(--primary-color); + backdrop-filter: blur(10px); + animation: toastSlideIn 0.3s ease-out; + max-width: 350px; +} + +.toast.success { + border-left-color: var(--success-color); +} + +.toast.error { + border-left-color: var(--error-color); +} + +.toast.warning { + border-left-color: var(--warning-color); +} + +@keyframes toastSlideIn { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-container { + padding: 0 1rem; + } + + .nav-links { + gap: 1rem; + } + + .nav-link span { + display: none; + } + + .main-container { + padding: 1rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-features { + grid-template-columns: 1fr; + } + + .search-box, + .url-input-box, + .chat-input-box { + flex-direction: column; + } + + .upload-zone { + padding: 2rem 1rem; + } + + .paper-actions { + flex-direction: column; + } + + .message-content { + max-width: 85%; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + } + + .section-header h2 { + font-size: 2rem; + } + + .upload-content i { + font-size: 2rem; + } + + .upload-content h3 { + font-size: 1.25rem; + } +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--background-light); +} + +::-webkit-scrollbar-thumb { + background: var(--surface-color); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--primary-color); +} + +/* Selection */ +::selection { + background: rgba(99, 102, 241, 0.3); + color: var(--text-primary); +} + +/* Focus states */ +*:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + +/* Enhanced Section Headers */ +.section-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 3rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border-color); +} + +.section-icon { + width: 60px; + height: 60px; + border-radius: 16px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); +} + +.section-icon i { + color: white; + font-size: 1.5rem; +} + +.section-title { + flex: 1; +} + +.section-title h2 { + font-size: 2rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.section-title p { + color: var(--text-secondary); + font-size: 1rem; +} + +/* Enhanced Search Page */ +.search-hero { + padding: 2rem 0 4rem; + text-align: center; +} + +.search-hero-content { + max-width: 1000px; + margin: 0 auto; + padding: 0 2rem; +} + +.search-title-area { + margin-bottom: 3rem; +} + +.search-icon-large { + width: 80px; + height: 80px; + border-radius: 20px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 2rem; + box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3); + animation: float 6s ease-in-out infinite; +} + +.search-icon-large i { + font-size: 2.5rem; + color: white; +} + +.search-title-area h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.search-title-area p { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* Enhanced Search Box */ +.search-box-enhanced { + margin-bottom: 4rem; +} + +.search-input-container { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.search-input-wrapper { + flex: 1; + position: relative; + background: rgba(255, 255, 255, 0.05); + border: 2px solid var(--border-color); + border-radius: 20px; + padding: 0.75rem 1.5rem; + display: flex; + align-items: center; + gap: 1rem; + transition: var(--transition-normal); + backdrop-filter: blur(10px); +} + +.search-input-wrapper:focus-within { + border-color: var(--primary-color); + box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); + background: rgba(255, 255, 255, 0.08); +} + +.search-icon { + color: var(--text-muted); + font-size: 1.25rem; + transition: var(--transition-fast); +} + +.search-input-wrapper:focus-within .search-icon { + color: var(--primary-color); +} + +.search-input-wrapper input { + flex: 1; + padding: 0.75rem 0; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 1.125rem; + font-weight: 500; +} + +.search-input-wrapper input:focus { + outline: none; +} + +.search-input-wrapper input::placeholder { + color: var(--text-muted); + font-weight: 400; +} + +.search-submit-btn { + padding: 0.75rem 1.5rem; + border-radius: 16px; + border: none; + background: var(--gradient-primary); + color: white; + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 600; + font-size: 1rem; +} + +.search-submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); +} + +.search-actions { + display: flex; + gap: 0.5rem; +} + +.voice-search-btn, +.advanced-search-btn { + width: 48px; + height: 48px; + border-radius: 12px; + border: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.05); + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.voice-search-btn:hover, +.advanced-search-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--primary-color); + border-color: var(--primary-color); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2); +} + +.advanced-search-btn.active { + background: var(--primary-color); + color: white; + border-color: var(--primary-color); +} + +.advanced-search-btn.active:hover { + background: var(--primary-dark); +} + +/* Advanced Filters */ +.advanced-filters { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.5rem; + margin-top: 1rem; + display: none; + animation: slideDown 0.3s ease-out; + backdrop-filter: blur(10px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.advanced-filters.show { + display: block; +} + +.filters-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 1.5rem; + align-items: end; +} + +@media (max-width: 768px) { + .filters-row { + grid-template-columns: 1fr; + gap: 1rem; + } +} + +.filter-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.filter-label { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.5rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.filter-label i { + color: var(--primary-color); + font-size: 1rem; +} + +.filter-select { + padding: 0.75rem; + background: var(--background-dark); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-primary); + font-size: 0.9rem; + cursor: pointer; + transition: var(--transition-fast); + appearance: none; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; +} + +.filter-select:hover { + background: rgba(255, 255, 255, 0.05); + border-color: var(--primary-color); +} + +.filter-select:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); + background: rgba(255, 255, 255, 0.08); +} + +.filter-select option { + background: var(--background-dark); + color: var(--text-primary); + padding: 0.5rem; + border: none; +} + +.filter-select option:hover, +.filter-select option:checked { + background: var(--primary-color); + color: white; +} + +/* Quick Search Categories */ +.quick-search-section { + margin-bottom: 3rem; +} + +.quick-search-section h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 2rem; + color: var(--text-primary); + text-align: center; +} + +.quick-search-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; +} + +.quick-search-card { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 16px; + cursor: pointer; + transition: var(--transition-normal); + text-align: left; + backdrop-filter: blur(10px); +} + +.quick-search-card:hover { + transform: translateY(-4px); + background: rgba(255, 255, 255, 0.08); + border-color: var(--primary-color); + box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2); +} + +.quick-search-card .card-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.quick-search-card .card-icon i { + font-size: 1.5rem; + color: white; +} + +.quick-search-card .card-content h4 { + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--text-primary); +} + +.quick-search-card .card-content span { + font-size: 0.875rem; + color: var(--text-muted); +} + +/* Search Tips */ +.search-tips { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + margin-bottom: 3rem; + overflow: hidden; +} + +.tips-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + cursor: pointer; +} + +.tips-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; + color: var(--text-primary); + font-size: 1.125rem; +} + +.tips-header i { + color: var(--accent-color); +} + +.tips-toggle { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); +} + +.tips-toggle:hover { + color: var(--primary-color); +} + +.tips-content { + padding: 0 1.5rem 1.5rem; + display: none; +} + +.tips-content.show { + display: block; + animation: slideDown 0.3s ease-out; +} + +.tips-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.tip-item { + display: flex; + gap: 1rem; + padding: 1rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; +} + +.tip-icon { + width: 40px; + height: 40px; + border-radius: 10px; + background: var(--gradient-secondary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.tip-icon i { + font-size: 1rem; + color: white; +} + +.tip-content h4 { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.tip-content p { + font-size: 0.875rem; + color: var(--text-secondary); + line-height: 1.5; +} + +.tip-content code { + background: rgba(99, 102, 241, 0.1); + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-size: 0.8rem; + color: var(--primary-light); +} + +/* Recent Searches */ +.recent-searches { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.5rem; + margin-bottom: 3rem; +} + +.recent-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.recent-header h3 { + display: flex; + align-items: center; + gap: 0.5rem; + margin: 0; + color: var(--text-primary); + font-size: 1.125rem; +} + +.clear-history { + background: none; + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + font-size: 0.875rem; +} + +.clear-history:hover { + border-color: var(--error-color); + color: var(--error-color); +} + +/* Enhanced Placeholder */ +.search-placeholder-enhanced { + text-align: center; + padding: 4rem 2rem; +} + +.placeholder-animation { + margin-bottom: 2rem; +} + +.floating-papers { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 2rem; +} + +.paper-icon { + font-size: 3rem; + animation: floatPaper 3s ease-in-out infinite; + opacity: 0.7; +} + +.paper-icon:nth-child(1) { animation-delay: 0s; } +.paper-icon:nth-child(2) { animation-delay: 1s; } +.paper-icon:nth-child(3) { animation-delay: 2s; } + +@keyframes floatPaper { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } +} + +.search-placeholder-enhanced h3 { + font-size: 1.75rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.search-placeholder-enhanced p { + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.placeholder-stats { + display: flex; + justify-content: center; + gap: 3rem; + margin-top: 3rem; +} + +.placeholder-stats .stat { + text-align: center; +} + +.placeholder-stats .stat strong { + display: block; + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 0.25rem; +} + +.placeholder-stats .stat span { + font-size: 0.875rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Enhanced Search Suggestions */ +.search-suggestions-dropdown { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--background-light); + border: 1px solid var(--border-color); + border-radius: 16px; + margin-top: 0.5rem; + padding: 1rem; + z-index: 100; + box-shadow: var(--shadow-xl); + backdrop-filter: blur(20px); + display: none; +} + +.search-suggestions-dropdown.show { + display: block; + animation: slideDown 0.3s ease-out; +} + +.suggestions-section { + margin-bottom: 1rem; +} + +.suggestions-section:last-child { + margin-bottom: 0; +} + +.suggestions-section h4 { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-muted); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.suggestion-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + cursor: pointer; + transition: var(--transition-fast); + border-radius: 8px; + margin-bottom: 0.25rem; +} + +.suggestion-item:hover { + background: rgba(99, 102, 241, 0.1); + color: var(--text-primary); +} + +.suggestion-item i { + color: var(--text-muted); + width: 16px; + text-align: center; +} + +.suggestion-item.trending i { + color: var(--warning-color); +} + +.suggestion-item span { + flex: 1; + color: var(--text-secondary); + font-weight: 500; +} + +.suggestion-item small { + color: var(--text-muted); + font-size: 0.75rem; +} + +.trending-badge { + background: var(--warning-color); + color: var(--text-inverse); + padding: 0.15rem 0.5rem; + border-radius: 10px; + font-size: 0.7rem; + font-weight: 600; +} + +/* Animations */ +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Page System */ +.page { + display: none; + min-height: 100vh; +} + +.page.active { + display: block; +} + +/* Landing Page Styles */ +.landing-nav { + background: rgba(15, 23, 42, 0.98); + backdrop-filter: blur(20px); +} + +.landing-nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-cta-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + background: var(--gradient-primary); + border: none; + border-radius: 12px; + color: white; + font-weight: 600; + cursor: pointer; + transition: var(--transition-normal); + text-decoration: none; +} + +.nav-cta-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); +} + +/* Features Section */ +.features-section { + padding: 6rem 0; + background: rgba(255, 255, 255, 0.02); + border-top: 1px solid var(--border-color); +} + +.features-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.features-header { + text-align: center; + margin-bottom: 4rem; +} + +.features-header h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.features-header p { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.feature-card { + padding: 2rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 16px; + text-align: center; + transition: var(--transition-normal); + backdrop-filter: blur(10px); +} + +.feature-card:hover { + transform: translateY(-8px); + border-color: var(--primary-color); + background: rgba(255, 255, 255, 0.08); + box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2); +} + +.card-icon { + width: 72px; + height: 72px; + border-radius: 16px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); +} + +.card-icon i { + font-size: 2rem; + color: white; +} + +.feature-card h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.feature-card p { + color: var(--text-secondary); + line-height: 1.6; + font-size: 1rem; +} + +/* About Section */ +.about-section { + padding: 6rem 0; + background: rgba(255, 255, 255, 0.01); +} + +.about-container { + max-width: 800px; + margin: 0 auto; + padding: 0 2rem; + text-align: center; +} + +.about-content h2 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 2rem; + color: var(--text-primary); +} + +.about-content p { + font-size: 1.125rem; + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: 3rem; +} + +.about-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.stat-item { + text-align: center; +} + +.stat-number { + font-size: 2.5rem; + font-weight: 700; + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 0.5rem; +} + +.stat-label { + color: var(--text-secondary); + font-size: 1rem; + font-weight: 500; +} + +/* Footer */ +.landing-footer { + background: var(--background-light); + border-top: 1px solid var(--border-color); + padding: 3rem 0; +} + +.footer-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + text-align: center; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.footer-brand .brand-icon { + width: 32px; + height: 32px; +} + +.footer-brand .brand-name { + font-size: 1.25rem; + font-weight: 700; + color: var(--text-primary); +} + +.footer-content p { + color: var(--text-muted); + font-size: 0.9rem; +} + +/* App Page Styles */ +.app-nav { + background: rgba(15, 23, 42, 0.95); +} + +.back-to-landing { + width: 44px; + height: 44px; + border-radius: 12px; + border: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.05); + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.back-to-landing:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border-color: var(--primary-color); + transform: translateY(-1px); +} + +/* Smooth scrolling for landing page */ +html { + scroll-behavior: smooth; +} + +/* Page transitions */ +.page { + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.page.active { + opacity: 1; +} + +/* Mobile responsive updates */ +@media (max-width: 768px) { + .landing-nav-links { + gap: 1rem; + } + + .nav-cta-btn { + padding: 0.5rem 1rem; + font-size: 0.875rem; + } + + .features-header h2, + .about-content h2 { + font-size: 2rem; + } + + .features-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .feature-card { + padding: 1.5rem; + } + + .about-stats { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 1.5rem; + } + + .stat-number { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + .landing-nav-links .nav-link span, + .nav-cta-btn span { + display: none; + } + + .features-section, + .about-section { + padding: 4rem 0; + } + + .features-header h2, + .about-content h2 { + font-size: 1.75rem; + } + + .hero-cta { + flex-direction: column; + align-items: center; + } + + .cta-button { + min-width: 200px; + } +} + +/* Enhanced Upload Page */ +.upload-hero { + padding: 2rem 0 4rem; + text-align: center; +} + +.upload-hero-content { + max-width: 1000px; + margin: 0 auto; + padding: 0 2rem; +} + +.upload-title-area { + margin-bottom: 3rem; +} + +.upload-icon-large { + width: 80px; + height: 80px; + border-radius: 20px; + background: var(--gradient-secondary); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 2rem; + box-shadow: 0 12px 40px rgba(6, 182, 212, 0.3); + animation: float 6s ease-in-out infinite; +} + +.upload-icon-large i { + font-size: 2.5rem; + color: white; +} + +.upload-title-area h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + background: var(--gradient-secondary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.upload-title-area p { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* Enhanced Upload Methods */ +.upload-methods-enhanced { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-bottom: 3rem; +} + +@media (max-width: 768px) { + .upload-methods-enhanced { + grid-template-columns: 1fr; + gap: 1.5rem; + } +} + +.upload-method-card { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 20px; + padding: 2rem; + transition: var(--transition-normal); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.upload-method-card:hover { + transform: translateY(-4px); + border-color: var(--primary-color); + box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15); +} + +.primary-upload:hover { + border-color: var(--accent-color); + box-shadow: 0 12px 40px rgba(6, 182, 212, 0.15); +} + +.upload-card-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 2rem; +} + +.upload-card-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.secondary-upload .upload-card-icon { + background: var(--gradient-secondary); +} + +.upload-card-icon i { + font-size: 1.5rem; + color: white; +} + +.upload-card-title h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--text-primary); +} + +.upload-card-title p { + font-size: 0.875rem; + color: var(--text-muted); + margin: 0; +} + +/* Upload Drop Zone */ +.upload-drop-zone { + border: 2px dashed var(--border-color); + border-radius: 16px; + padding: 2rem; + text-align: center; + transition: var(--transition-normal); + cursor: pointer; + margin-bottom: 1.5rem; + background: rgba(255, 255, 255, 0.02); +} + +.upload-drop-zone:hover, +.upload-drop-zone.drag-over { + border-color: var(--accent-color); + background: rgba(6, 182, 212, 0.05); + transform: scale(1.02); +} + +.drop-zone-content { + pointer-events: none; +} + +.upload-animation { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.upload-cloud { + font-size: 3rem; + color: var(--accent-color); + animation: float 3s ease-in-out infinite; +} + +.upload-arrow { + font-size: 2rem; + color: var(--text-muted); + animation: bounce 2s ease-in-out infinite; +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +.drop-zone-content h4 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.drop-zone-content p { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.supported-formats { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.format-badge { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + border-radius: 8px; + font-size: 0.875rem; + font-weight: 500; +} + +.format-badge.pdf { + background: rgba(220, 53, 69, 0.1); + color: #dc3545; + border: 1px solid rgba(220, 53, 69, 0.2); +} + +.format-badge.docx { + background: rgba(0, 123, 255, 0.1); + color: #007bff; + border: 1px solid rgba(0, 123, 255, 0.2); +} + +.format-badge.txt { + background: rgba(108, 117, 125, 0.1); + color: #6c757d; + border: 1px solid rgba(108, 117, 125, 0.2); +} + +.upload-specs { + display: flex; + justify-content: center; + gap: 2rem; + font-size: 0.875rem; + color: var(--text-muted); +} + +.upload-specs span { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.upload-actions { + text-align: center; +} + +.browse-btn { + padding: 0.75rem 2rem; + background: var(--gradient-secondary); + border: none; + border-radius: 12px; + color: white; + font-weight: 600; + cursor: pointer; + transition: var(--transition-normal); + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.browse-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4); +} + +/* Enhanced URL Input */ +.url-input-enhanced { + margin-bottom: 2rem; +} + +.url-input-wrapper { + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.05); + border: 2px solid var(--border-color); + border-radius: 16px; + padding: 0.75rem; + gap: 1rem; + transition: var(--transition-normal); +} + +.url-input-wrapper:focus-within { + border-color: var(--accent-color); + box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1); +} + +.url-icon { + color: var(--text-muted); + font-size: 1.125rem; +} + +.url-input-wrapper input { + flex: 1; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 1rem; + padding: 0.5rem 0; +} + +.url-input-wrapper input:focus { + outline: none; +} + +.url-input-wrapper .analyze-btn { + padding: 0.5rem 1rem; + background: var(--gradient-secondary); + border: none; + border-radius: 8px; + color: white; + font-weight: 600; + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.url-input-wrapper .analyze-btn:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4); +} + +/* URL Suggestions */ +.url-suggestions { + margin-bottom: 1.5rem; +} + +.url-suggestions h4 { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.source-buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.5rem; +} + +.source-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + font-size: 0.875rem; +} + +.source-btn:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--accent-color); + color: var(--text-primary); +} + +/* Example URLs */ +.url-examples-details { + border: 1px solid var(--border-color); + border-radius: 8px; + overflow: hidden; +} + +.url-examples-details summary { + padding: 0.75rem; + background: rgba(255, 255, 255, 0.05); + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 500; + color: var(--text-secondary); + transition: var(--transition-fast); +} + +.url-examples-details summary:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); +} + +.example-list { + padding: 0.5rem; +} + +.example-url { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + padding: 0.75rem; + background: transparent; + border: 1px solid transparent; + border-radius: 8px; + text-align: left; + cursor: pointer; + transition: var(--transition-fast); + margin-bottom: 0.25rem; +} + +.example-url:hover { + background: rgba(255, 255, 255, 0.05); + border-color: var(--border-color); +} + +.example-url i { + color: var(--text-muted); + flex-shrink: 0; +} + +.example-url span { + flex: 1; + color: var(--text-secondary); + font-size: 0.875rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.example-url small { + color: var(--text-muted); + font-size: 0.75rem; +} + +/* Upload Tips */ +.upload-tips { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + overflow: hidden; +} + +.upload-tips .tips-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + cursor: pointer; +} + +.upload-tips .tips-content { + padding: 0 1.5rem 1.5rem; + display: none; +} + +.upload-tips .tips-content.show { + display: block; + animation: slideDown 0.3s ease-out; +} + +/* Enhanced Upload Progress */ +.upload-progress-enhanced { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 20px; + padding: 2rem; + margin-bottom: 2rem; + backdrop-filter: blur(10px); +} + +.progress-container { + max-width: 800px; + margin: 0 auto; +} + +.progress-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 2rem; +} + +.progress-title h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.progress-title p { + color: var(--text-secondary); + margin: 0; +} + +.progress-stats { + text-align: right; +} + +.progress-percentage { + display: block; + font-size: 2rem; + font-weight: 700; + color: var(--accent-color); + margin-bottom: 0.25rem; +} + +.progress-time { + font-size: 0.875rem; + color: var(--text-muted); +} + +.progress-bar-container { + margin-bottom: 2rem; +} + +.progress-bar { + height: 12px; + background: rgba(255, 255, 255, 0.1); + border-radius: 6px; + overflow: hidden; + position: relative; +} + +.progress-fill { + height: 100%; + background: var(--gradient-secondary); + width: 0%; + transition: width 0.5s ease; + position: relative; +} + +.progress-glow { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4)); + animation: glow 2s ease-in-out infinite; +} + +@keyframes glow { + 0%, 100% { opacity: 0; } + 50% { opacity: 1; } +} + +.progress-steps-enhanced { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1rem; +} + +@media (max-width: 768px) { + .progress-steps-enhanced { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + } +} + +.progress-step { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + opacity: 0.4; + transition: var(--transition-normal); +} + +.progress-step.active { + opacity: 1; +} + +.step-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.75rem; + transition: var(--transition-normal); +} + +.progress-step.active .step-icon { + background: var(--gradient-secondary); + box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4); +} + +.step-icon i { + font-size: 1.25rem; + color: var(--text-muted); +} + +.progress-step.active .step-icon i { + color: white; +} + +.step-content h4 { + font-size: 0.875rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--text-secondary); +} + +.progress-step.active .step-content h4 { + color: var(--text-primary); +} + +.step-content p { + font-size: 0.75rem; + color: var(--text-muted); + margin: 0; +} + +/* Enhanced Upload Placeholder */ +.upload-placeholder-enhanced { + text-align: center; + padding: 4rem 2rem; +} + +.floating-documents { + display: flex; + justify-content: center; + gap: 2rem; + margin-bottom: 2rem; +} + +.doc-icon { + font-size: 3rem; + animation: floatDoc 3s ease-in-out infinite; + opacity: 0.7; +} + +.doc-icon:nth-child(1) { animation-delay: 0s; } +.doc-icon:nth-child(2) { animation-delay: 1s; } +.doc-icon:nth-child(3) { animation-delay: 2s; } + +@keyframes floatDoc { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-10px); } +} + +.upload-placeholder-enhanced h3 { + font-size: 1.75rem; + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); +} + +.upload-placeholder-enhanced p { + font-size: 1.125rem; + color: var(--text-secondary); + margin-bottom: 2rem; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +.placeholder-features { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 2rem; +} + +@media (max-width: 768px) { + .placeholder-features { + flex-direction: column; + gap: 1rem; + } +} + +.placeholder-features .feature { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); +} + +.placeholder-features .feature i { + color: var(--accent-color); +} + +/* Enhanced Chat Page */ +.chat-hero { + padding: 2rem 0 3rem; + text-align: center; +} + +.chat-hero-content { + max-width: 1000px; + margin: 0 auto; + padding: 0 2rem; +} + +.chat-title-area { + margin-bottom: 2rem; +} + +.chat-icon-large { + width: 80px; + height: 80px; + border-radius: 20px; + background: var(--gradient-accent); + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 2rem; + box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3); + animation: float 6s ease-in-out infinite; +} + +.chat-icon-large i { + font-size: 2.5rem; + color: white; +} + +.chat-title-area h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; + background: var(--gradient-accent); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.chat-title-area p { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* Enhanced Chat Status */ +.chat-status-enhanced { + margin-bottom: 2rem; +} + +.status-card { + display: flex; + align-items: center; + gap: 1.5rem; + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.5rem; + backdrop-filter: blur(10px); + transition: var(--transition-normal); +} + +.status-card:hover { + background: rgba(255, 255, 255, 0.05); + border-color: var(--accent-color); +} + +.status-icon { + width: 48px; + height: 48px; + border-radius: 12px; + background: var(--gradient-accent); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.status-icon i { + font-size: 1.5rem; + color: white; +} + +.status-info { + flex: 1; +} + +.status-info h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--text-primary); +} + +.status-info p { + color: var(--text-secondary); + margin: 0; + font-size: 0.9rem; +} + +.status-actions { + display: flex; + gap: 0.5rem; +} + +.quick-action-btn { + width: 40px; + height: 40px; + border-radius: 10px; + border: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.05); + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.quick-action-btn:hover { + background: var(--accent-color); + color: white; + border-color: var(--accent-color); + transform: scale(1.05); +} + +/* Enhanced Chat Container */ +.chat-container-enhanced { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 20px; + overflow: hidden; + backdrop-filter: blur(10px); + margin-bottom: 2rem; +} + +.chat-messages-container { + height: 500px; + overflow-y: auto; + padding: 2rem; + scroll-behavior: smooth; +} + +.chat-messages-container::-webkit-scrollbar { + width: 6px; +} + +.chat-messages-container::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + border-radius: 3px; +} + +.chat-messages-container::-webkit-scrollbar-thumb { + background: var(--accent-color); + border-radius: 3px; +} + +/* Enhanced Welcome Message */ +.welcome-message-enhanced { + background: rgba(139, 92, 246, 0.05); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 16px; + padding: 2rem; + margin-bottom: 2rem; +} + +.message-avatar-enhanced { + position: relative; + margin-right: 1rem; + flex-shrink: 0; +} + +.avatar-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: var(--gradient-accent); + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); +} + +.avatar-icon i { + font-size: 1.5rem; + color: white; +} + +.avatar-status { + position: absolute; + bottom: 2px; + right: 2px; + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid var(--background-dark); +} + +.avatar-status.online { + background: var(--success-color); +} + +.avatar-status.typing { + background: var(--warning-color); + animation: pulse 2s infinite; +} + +.message-content-enhanced { + flex: 1; +} + +.message-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.message-sender { + font-weight: 600; + color: var(--text-primary); +} + +.message-time { + font-size: 0.75rem; + color: var(--text-muted); +} + +.message-badge { + padding: 0.2rem 0.5rem; + border-radius: 10px; + font-size: 0.7rem; + font-weight: 600; + text-transform: uppercase; +} + +.message-badge.ai { + background: var(--gradient-accent); + color: white; +} + +/* Welcome Message Content */ +.welcome-intro { + margin-bottom: 2rem; +} + +.welcome-intro h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.welcome-intro p { + color: var(--text-secondary); + line-height: 1.6; +} + +.capabilities-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-bottom: 2rem; +} + +.capability-item { + display: flex; + gap: 1rem; + padding: 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 12px; + transition: var(--transition-fast); +} + +.capability-item:hover { + background: rgba(255, 255, 255, 0.08); + border-color: var(--accent-color); +} + +.capability-icon { + width: 40px; + height: 40px; + border-radius: 10px; + background: var(--gradient-accent); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.capability-icon i { + font-size: 1.125rem; + color: white; +} + +.capability-content h4 { + font-size: 0.9rem; + font-weight: 600; + margin-bottom: 0.25rem; + color: var(--text-primary); +} + +.capability-content p { + font-size: 0.8rem; + color: var(--text-muted); + margin: 0; +} + +.getting-started { + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 1.5rem; +} + +.getting-started p { + margin-bottom: 1rem; + color: var(--text-primary); + font-weight: 600; +} + +.getting-started ol { + margin: 0; + padding-left: 1.5rem; + color: var(--text-secondary); +} + +.getting-started li { + margin-bottom: 0.5rem; + line-height: 1.5; +} + +/* Chat Loading Indicator */ +.chat-loading { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + margin-bottom: 1rem; +} + +.typing-indicator { + display: flex; + align-items: center; + gap: 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 1rem 1.5rem; +} + +.typing-dots { + display: flex; + gap: 0.25rem; +} + +.typing-dots .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent-color); + animation: typingDots 1.4s infinite ease-in-out; +} + +.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; } +.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; } + +@keyframes typingDots { + 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } + 40% { transform: scale(1); opacity: 1; } +} + +.typing-text { + color: var(--text-secondary); + font-size: 0.9rem; + font-style: italic; +} + +/* Enhanced Chat Input */ +.chat-input-enhanced { + border-top: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.02); +} + +/* Smart Suggestions */ +.smart-suggestions { + padding: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.suggestions-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.suggestions-header h4 { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + margin: 0; +} + +.suggestions-toggle { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + padding: 0.25rem; +} + +.suggestions-toggle:hover { + color: var(--accent-color); +} + +.suggestions-content { + display: block; + animation: slideDown 0.3s ease-out; +} + +.suggestions-content.collapsed { + display: none; +} + +.suggestion-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; +} + +.suggestion-category h5 { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.suggestion-chip-enhanced { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + padding: 0.75rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + margin-bottom: 0.5rem; + text-align: left; +} + +.suggestion-chip-enhanced:hover { + background: rgba(139, 92, 246, 0.1); + border-color: var(--accent-color); + color: var(--text-primary); +} + +.suggestion-chip-enhanced i { + color: var(--accent-color); + flex-shrink: 0; +} + +/* Chat Input Wrapper */ +.chat-input-wrapper { + padding: 1.5rem; +} + +.input-container { + margin-bottom: 1rem; +} + +.input-field { + display: flex; + align-items: flex-end; + background: rgba(255, 255, 255, 0.05); + border: 2px solid var(--border-color); + border-radius: 16px; + padding: 1rem; + gap: 1rem; + transition: var(--transition-normal); +} + +.input-field:focus-within { + border-color: var(--accent-color); + box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1); +} + +.input-field textarea { + flex: 1; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 1rem; + resize: none; + max-height: 120px; + font-family: inherit; + line-height: 1.5; +} + +.input-field textarea:focus { + outline: none; +} + +.input-field textarea::placeholder { + color: var(--text-muted); +} + +.input-actions { + display: flex; + gap: 0.5rem; + align-items: center; +} + +.action-btn { + width: 36px; + height: 36px; + border-radius: 8px; + border: none; + background: rgba(255, 255, 255, 0.1); + color: var(--text-muted); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.action-btn:hover { + background: rgba(255, 255, 255, 0.15); + color: var(--text-secondary); +} + +.send-btn-enhanced { + width: 36px; + height: 36px; + border-radius: 8px; + border: none; + background: var(--gradient-accent); + color: white; + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.send-btn-enhanced:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); +} + +/* Enhanced Input Footer */ +.input-footer-enhanced { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +.input-hints { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.hint-item { + font-size: 0.75rem; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 0.25rem; +} + +.hint-item kbd { + padding: 0.1rem 0.3rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + font-size: 0.7rem; + border: 1px solid var(--border-color); +} + +.chat-stats { + display: flex; + gap: 1rem; +} + +.stat-item { + font-size: 0.75rem; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 0.25rem; +} + +.stat-item i { + color: var(--accent-color); +} + +/* Chat Quick Actions */ +.chat-quick-actions { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + padding: 1.5rem; + backdrop-filter: blur(10px); +} + +.quick-actions-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; +} + +.quick-actions-header h4 { + font-size: 1.125rem; + font-weight: 600; + color: var(--text-primary); + margin: 0; +} + +.close-quick-actions { + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + padding: 0.25rem; + transition: var(--transition-fast); +} + +.close-quick-actions:hover { + color: var(--text-primary); +} + +.quick-actions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; +} + +.quick-action-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 12px; + cursor: pointer; + transition: var(--transition-normal); + text-align: center; +} + +.quick-action-card:hover { + background: rgba(255, 255, 255, 0.08); + border-color: var(--accent-color); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2); +} + +.quick-action-card i { + font-size: 1.5rem; + color: var(--accent-color); +} + +.quick-action-card span { + font-size: 0.875rem; + font-weight: 500; + color: var(--text-secondary); +} + +/* Responsive Design */ +@media (max-width: 768px) { + .chat-title-area h1 { + font-size: 2rem; + } + + .status-card { + flex-direction: column; + text-align: center; + gap: 1rem; + } + + .suggestion-categories { + grid-template-columns: 1fr; + } + + .input-footer-enhanced { + flex-direction: column; + align-items: flex-start; + } + + .quick-actions-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Summary + Chat Layout */ +.summary-chat-header { + background: rgba(255, 255, 255, 0.02); + border-bottom: 1px solid var(--border-color); + padding: 1.5rem 2rem; + backdrop-filter: blur(10px); +} + +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1400px; + margin: 0 auto; + gap: 2rem; +} + +.back-btn { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 8px; + color: var(--text-secondary); + text-decoration: none; + transition: var(--transition-fast); + cursor: pointer; + font-size: 0.9rem; +} + +.back-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); + border-color: var(--accent-color); +} + +.paper-info { + flex: 1; + min-width: 0; +} + +.paper-info h2 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.paper-meta { + display: flex; + align-items: center; + gap: 1rem; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.paper-meta .author { + color: var(--accent-color); +} + +.paper-meta .date, +.paper-meta .category { + padding: 0.2rem 0.5rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + font-size: 0.8rem; +} + +.header-actions { + display: flex; + gap: 0.5rem; +} + +.action-btn-header { + width: 40px; + height: 40px; + border-radius: 8px; + border: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.05); + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.action-btn-header:hover { + background: var(--accent-color); + color: white; + border-color: var(--accent-color); +} + +/* Summary + Chat Container */ +.summary-chat-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + padding: 3rem; + max-width: 1600px; + margin: 0 auto; + height: calc((var(--vh, 1vh) * 100) - 180px); + min-height: 800px; +} + +/* Summary Panel */ +.summary-panel { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + overflow: hidden; + backdrop-filter: blur(10px); + display: flex; + flex-direction: column; +} + +.summary-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem; + border-bottom: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.02); +} + +.summary-title { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.summary-title i { + color: var(--accent-color); + font-size: 1.25rem; +} + +.summary-title h3 { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-primary); + margin: 0; +} + +.summary-actions { + display: flex; + gap: 0.5rem; +} + +.summary-action-btn { + width: 36px; + height: 36px; + border-radius: 8px; + border: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.05); + color: var(--text-secondary); + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; +} + +.summary-action-btn:hover { + background: var(--accent-color); + color: white; + border-color: var(--accent-color); +} + +.summary-content { + flex: 1; + padding: 3rem; + overflow-y: auto; + font-size: 1.1rem; + line-height: 1.8; +} + +.summary-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 200px; + color: var(--text-secondary); +} + +.loading-spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(139, 92, 246, 0.3); + border-top: 3px solid var(--accent-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 1rem; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.summary-text { + color: var(--text-secondary); + line-height: 1.9; + font-size: 1.2rem; +} + +.summary-text h1, +.summary-text h2, +.summary-text h3, +.summary-text h4 { + color: var(--text-primary); + margin: 2rem 0 1.5rem; + font-size: 1.4rem; + font-weight: 600; +} + +.summary-text p { + margin-bottom: 1.5rem; + font-size: 1.1rem; + line-height: 1.8; +} + +.summary-text ul, +.summary-text ol { + margin: 1rem 0; + padding-left: 1.5rem; +} + +.summary-text li { + margin-bottom: 0.5rem; +} + +.summary-text strong { + color: var(--text-primary); +} + +.summary-stats { + display: flex; + justify-content: space-between; + padding: 1rem 1.5rem; + border-top: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.02); +} + +.summary-stats .stat-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + color: var(--text-muted); +} + +.summary-stats .stat-item i { + color: var(--accent-color); +} + +/* Chat Panel */ +.chat-panel { + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border-color); + border-radius: 16px; + overflow: hidden; + backdrop-filter: blur(10px); + display: flex; + flex-direction: column; +} + +.chat-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem; + border-bottom: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.02); +} + +.chat-title { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.chat-title i { + color: var(--accent-color); + font-size: 1.25rem; +} + +.chat-title h3 { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-primary); + margin: 0; +} + +.chat-status .status-indicator { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; +} + +.chat-status .status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--success-color); + animation: pulse 2s infinite; +} + +.chat-messages-panel { + flex: 1; + padding: 2.5rem; + overflow-y: auto; + font-size: 1.1rem; +} + +.chat-welcome { + display: flex; + gap: 1.5rem; + padding: 2rem; + background: rgba(139, 92, 246, 0.05); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 16px; + margin-bottom: 2rem; +} + +.welcome-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--gradient-accent); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.welcome-avatar i { + color: white; + font-size: 1.25rem; +} + +.welcome-content h4 { + font-size: 1.2rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.75rem; +} + +.welcome-content p { + color: var(--text-secondary); + font-size: 1.05rem; + line-height: 1.6; + margin: 0; +} + +.chat-input-panel { + border-top: 1px solid var(--border-color); + background: rgba(255, 255, 255, 0.02); + padding: 2.5rem; +} + +.quick-questions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.quick-question-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1.25rem; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--border-color); + border-radius: 25px; + color: var(--text-secondary); + font-size: 0.95rem; + cursor: pointer; + transition: var(--transition-fast); +} + +.quick-question-btn:hover { + background: rgba(139, 92, 246, 0.1); + border-color: var(--accent-color); + color: var(--text-primary); +} + +.quick-question-btn i { + color: var(--accent-color); + font-size: 0.7rem; +} + +.chat-input-container { + margin-top: 1rem; +} + +.chat-input-field { + display: flex; + align-items: flex-end; + gap: 1rem; + background: rgba(255, 255, 255, 0.05); + border: 2px solid var(--border-color); + border-radius: 16px; + padding: 1.25rem; + transition: var(--transition-normal); +} + +.chat-input-field:focus-within { + border-color: var(--accent-color); + box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1); +} + +.chat-input-field textarea { + flex: 1; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 1.1rem; + resize: none; + max-height: 150px; + min-height: 50px; + font-family: inherit; + line-height: 1.6; + padding: 0.5rem 0; +} + +.chat-input-field textarea:focus { + outline: none; +} + +.chat-input-field textarea::placeholder { + color: var(--text-muted); +} + +.send-btn-panel { + width: 44px; + height: 44px; + border-radius: 12px; + border: none; + background: var(--gradient-accent); + color: white; + cursor: pointer; + transition: var(--transition-fast); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: 1.1rem; +} + +.send-btn-panel:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); +} + +/* Chat Messages in Panel */ +.chat-message-panel { + display: flex; + gap: 1rem; + margin-bottom: 1.5rem; + animation: messageSlideIn 0.3s ease-out; +} + +.chat-message-panel.user { + flex-direction: row-reverse; +} + +.message-avatar-panel { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.message-avatar-panel.user { + background: var(--gradient-primary); +} + +.message-avatar-panel.bot { + background: var(--gradient-accent); +} + +.message-avatar-panel i { + color: white; + font-size: 0.9rem; +} + +.message-content-panel { + flex: 1; + min-width: 0; +} + +.message-content-panel.user { + text-align: right; +} + +.message-bubble { + display: inline-block; + padding: 1.1rem 1.6rem; + border-radius: 18px; + max-width: 95%; + word-wrap: break-word; + font-size: 1.1rem; + line-height: 1.75; + box-shadow: 0 6px 18px rgba(0,0,0,0.15); +} + +.message-bubble.user { + background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(168,85,247,0.18)); + border: none; + color: var(--text-primary); +} + +.message-bubble.bot { + background: rgba(31, 41, 55, 0.6); + border: none; + color: #dbe3ee; +} + +.message-time-panel { + font-size: 0.7rem; + color: var(--text-muted); + margin-top: 0.25rem; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .summary-chat-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + height: auto; + min-height: calc((var(--vh, 1vh) * 100) - 200px); + } + + .header-content { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .paper-info h2 { + white-space: normal; + text-align: center; + } +} + +@media (max-width: 768px) { + .summary-chat-container { + padding: 1rem; + gap: 1rem; + } + + .summary-header, + .chat-header { padding: 1rem; position: sticky; top: 70px; z-index: 5; } + + .summary-content { + padding: 1rem; + font-size: 1rem; + } + + .chat-input-panel { + padding: 1rem; + } + + .chat-messages-panel { + padding: 1rem; + font-size: 1rem; + } + + .quick-questions { + flex-direction: column; + } + + .quick-question-btn { + justify-content: center; + font-size: 0.9rem; + padding: 0.6rem 1rem; + } + + .summary-stats { + flex-direction: column; + gap: 0.75rem; + } + + .summary-text { + font-size: 1rem; + } + + .summary-text h1, + .summary-text h2, + .summary-text h3, + .summary-text h4 { + font-size: 1.25rem; + } + + .summary-text p { + font-size: 1rem; + } + /* Make chat and summary panels occupy full height on mobile */ + #summary-tab .summary-panel, + #chat-tab .chat-panel { height: calc((var(--vh, 1vh) * 100) - 180px); } + #summary-tab .summary-content, + #chat-tab .chat-messages-panel { height: calc((var(--vh, 1vh) * 100) - 300px); } + .chat-input-panel { position: sticky; bottom: 0; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(10px); } + .chat-input-field { padding: 1rem; } + .chat-input-field textarea { min-height: 44px; } +} + +/* Tab Navigation Styles */ +.tab-navigation { + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 0 2rem; + margin-bottom: 2rem; +} + +.tab-nav-container { + display: flex; + gap: 0; + max-width: 1200px; + margin: 0 auto; + overflow-x: auto; + align-items: center; +} + +.tab-btn { + position: relative; + background: none; + border: none; + color: #8b949e; + padding: 1.5rem 2rem; + white-space: nowrap; +} + +/* view-toggle removed for strict tabs */ + +/* Chat Message Styles */ +.chat-message { + margin-bottom: 1.5rem; + padding: 1rem; + border-radius: 12px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.chat-message.user { + background: rgba(124, 58, 237, 0.1); + border-color: rgba(124, 58, 237, 0.2); + margin-left: 2rem; +} + +.chat-message.assistant { + background: rgba(16, 185, 129, 0.1); + border-color: rgba(16, 185, 129, 0.2); + margin-right: 2rem; +} + +.message-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.message-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; +} + +.chat-message.user .message-avatar { + background: linear-gradient(135deg, #7c3aed, #a855f7); + color: white; +} + +.chat-message.assistant .message-avatar { + background: linear-gradient(135deg, #10b981, #06d6a0); + color: white; +} + +.message-info { + display: flex; + flex-direction: column; + gap: 0.125rem; +} + +.message-sender { + color: #ffffff; + font-weight: 500; + font-size: 0.9rem; +} + +.message-time { + color: #6b7280; + font-size: 0.75rem; +} + +.message-content { + color: #e6edf3; + line-height: 1.6; +} + +.message-content p { + margin: 0; +} + +/* Typing Indicator */ +.typing-indicator { + margin-bottom: 1.5rem; + padding: 1rem; + border-radius: 12px; + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.2); + margin-right: 2rem; +} + +.typing-dots { + display: flex; + gap: 0.25rem; + align-items: center; + padding: 0.5rem 0; +} + +.typing-dots .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #10b981; + animation: typingAnimation 1.4s infinite ease-in-out; +} + +.typing-dots .dot:nth-child(1) { + animation-delay: 0s; +} + +.typing-dots .dot:nth-child(2) { + animation-delay: 0.2s; +} + +.typing-dots .dot:nth-child(3) { + animation-delay: 0.4s; +} + +@keyframes typingAnimation { + 0%, 60%, 100% { + transform: scale(1); + opacity: 0.5; + } + 30% { + transform: scale(1.2); + opacity: 1; + } +} + +/* Enhanced Summary Tab Styles */ +.summary-container { + background: transparent; + border: none; +} + +.summary-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 1.5rem 2rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.03); + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.summary-title { + display: flex; + align-items: center; + gap: 1rem; +} + +.summary-icon { + background: linear-gradient(135deg, #7c3aed, #a855f7); + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; +} + +.summary-icon i { + font-size: 1.5rem; + color: white; +} + +.summary-title-text h3 { + color: #ffffff; + font-size: 1.5rem; + font-weight: 600; + margin: 0 0 0.25rem 0; +} + +.summary-title-text p { + color: #8b949e; + margin: 0; + font-size: 0.95rem; +} + +.summary-actions { + display: flex; + gap: 0.75rem; +} + +.summary-action-btn { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + padding: 0.75rem 1rem; + border-radius: 8px; + cursor: pointer; + font-size: 0.9rem; + transition: all 0.3s ease; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.summary-action-btn:hover { + background: rgba(124, 58, 237, 0.3); + border-color: rgba(124, 58, 237, 0.5); + transform: translateY(-1px); +} + +.summary-body { + display: grid; + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); + gap: 0; +} + +@media (max-width: 992px) { + .summary-body { + grid-template-columns: 1fr; + } +} + +.summary-main-content { + min-width: 0; + padding: 2rem; +} + +.summary-content { + height: 65vh; + max-height: 700px; + overflow-y: auto; + padding-right: 1.5rem; +} + +.summary-content::-webkit-scrollbar { + width: 6px; +} +.summary-content::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; +} +.summary-content::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 3px; +} + +.summary-loading { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1rem; +} + +.summary-text { + color: #cdd5e0; + line-height: 1.8; + font-size: 1.05rem; +} + +.summary-text h3 { + font-size: 1.25rem; + color: #fff; + font-weight: 600; + margin-top: 2rem; + margin-bottom: 1rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(255,255,255,0.1); +} +.summary-text p { + margin-bottom: 1rem; +} + +.summary-sidebar { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 2rem; + border-left: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.02); +} + +.summary-stats, .summary-keywords { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 1.5rem; +} + +.summary-stats h4, .summary-keywords h4 { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 1.1rem; + font-weight: 600; + margin: 0 0 1rem 0; + color: #fff; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +.stats-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.stat-item { + background: rgba(0,0,0,0.2); + border-radius: 12px; + padding: 1.25rem; + position: relative; + overflow: hidden; + transition: all 0.2s ease-in-out; + border: 1px solid transparent; +} + +.stat-item:hover { + transform: translateY(-2px); + background: rgba(0,0,0,0.3); + border-color: rgba(124, 58, 237, 0.5); +} + +.stat-text { + position: relative; + z-index: 2; +} + +.stat-label { + font-size: 0.8rem; + color: #8b949e; + margin-bottom: 0.25rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat-value { + font-size: 1.6rem; + font-weight: 700; + color: #fff; +} + +.stat-icon-small { + display: none; +} + +.stat-item::after { + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + font-size: 2.5rem; + color: rgba(124, 58, 237, 0.15); + z-index: 1; + transition: all 0.3s ease; +} + +.stat-item:hover::after { + color: rgba(124, 58, 237, 0.3); + transform: translateY(-50%) scale(1.1); +} + +#readingTime-item::after { content: '\f017'; } +#wordCount-item::after { content: '\f15c'; } +#compressionRatio-item::after { content: '\f78c'; } +#keyPoints-item::after { content: '\f005'; } + +.keywords-list { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; +} + +.keyword-chip { + background: rgba(255, 255, 255, 0.1); + color: #cdd5e0; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; +} + +.keyword-chip:hover { + background: #7c3aed; + color: #fff; + transform: translateY(-1px); +} + +.keyword-chip.skeleton { + background: rgba(255, 255, 255, 0.1); + width: 80px; + height: 33px; + border-radius: 20px; + animation: pulse-bg 1.5s infinite; +} + +@keyframes pulse-bg { + 0%, 100% { + background-color: rgba(255, 255, 255, 0.1); + } + 50% { + background-color: rgba(255, 255, 255, 0.15); + } +} + +.mobile-nav-toggle { + display: none; + background: rgba(255, 255, 255, 0.08); + border: 1px solid var(--border-color); + color: var(--text-primary); + padding: 0.5rem 0.75rem; + border-radius: 10px; +} + +@media (max-width: 992px) { + .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; } + .landing-nav-links, .nav-links { + position: absolute; + top: 70px; + right: 0; + left: 0; + display: none; + flex-direction: column; + gap: 0.5rem; + background: rgba(15, 23, 42, 0.98); + border-bottom: 1px solid var(--border-color); + padding: 0.75rem 1rem 1rem; + } + .landing-nav-links.show, .nav-links.show { display: flex; } +} + +@media (max-width: 480px) { + .toast-container { right: 50%; transform: translateX(50%); } +} + +/* Show only active tab content */ +.tab-content { display: none; } +.tab-content.active { display: block; } + +/* Chat Container sizing overrides for better viewport fit */ +#chat-tab .chat-container { + height: calc((var(--vh, 1vh) * 100) - 180px); + max-height: none; +} + +/* Reduce header/input paddings to save vertical space */ +#chat-tab .chat-header { padding: 1rem 1.25rem; } +#chat-tab .chat-messages-container { padding: 1.25rem; } +#chat-tab .chat-input-area { padding: 0.75rem 1.0rem 1rem; position: sticky; bottom: 0; background: rgba(15,23,42,0.9); backdrop-filter: blur(8px); } + +/* Make quick chips compact and horizontally scrollable */ +#chat-tab .quick-questions-chips { + margin-bottom: 0.5rem; + gap: 0.4rem; + overflow-x: auto; + white-space: nowrap; +} +#chat-tab .quick-questions-chips::-webkit-scrollbar { height: 6px; } + +/* Slightly tighter spacing between messages */ +.chat-message-panel { margin-bottom: 1rem; } + +/* Slightly smaller bubble text to fit one exchange */ +.message-bubble { font-size: 1rem; line-height: 1.6; } + +@media (max-width: 768px) { + #chat-tab .chat-messages-container { padding: 0.75rem; } + .chat-message-panel { margin-bottom: 0.75rem; } + .message-bubble { font-size: 0.95rem; line-height: 1.55; } +} + +/* Global mobile improvements */ +@media (max-width: 480px) { + /* Navbar */ + .nav-container { height: 56px; padding: 0 0.75rem; } + .brand-icon { width: 32px; height: 32px; } + .brand-name { font-size: 1rem; } + .brand-tagline { display: none; } + .mobile-nav-toggle { padding: 0.4rem 0.6rem; } + + /* Layout paddings */ + .main-container { padding: 0.75rem; } + .section { padding-left: 0; padding-right: 0; } + + /* Hero */ + .hero { padding: 3.5rem 0 2rem; } + .hero-title { font-size: 2rem; } + .hero-subtitle { font-size: 1rem; padding: 0 0.25rem; } + .hero-cta { gap: 0.5rem; } + .cta-button { width: 100%; min-width: auto; padding: 0.75rem 1rem; } + + /* Cards */ + .feature-card, .quick-search-card, .upload-method-card { padding: 1rem; border-radius: 12px; } + .paper-card, .result-card { padding: 1rem; border-radius: 12px; } + + /* Search */ + .search-hero-content { padding: 0 1rem; } + .search-input-wrapper { padding: 0.5rem 1rem; border-radius: 14px; } + .search-submit-btn { padding: 0.6rem 0.9rem; border-radius: 10px; } + .search-actions { gap: 0.35rem; } + .voice-search-btn, .advanced-search-btn { width: 42px; height: 42px; border-radius: 10px; } + + /* Tabs & headers */ + .tab-navigation { padding: 0 1rem; } + .tab-btn { padding: 0.9rem 1rem; } + .summary-header, .chat-header { padding: 1rem; } + .summary-content { padding: 1rem; } + + /* Summary + Chat sticky alignment */ + .summary-header, .chat-header { position: sticky; top: 56px; z-index: 5; } + + /* Chat */ + #chat-tab .chat-messages-container { padding: 0.75rem; } + .quick-questions-chips { gap: 0.4rem; } + .message-bubble { font-size: 0.97rem; line-height: 1.55; } +} + +@media (max-width: 360px) { + .nav-container { padding: 0 0.5rem; } + .hero-title { font-size: 1.75rem; } + .search-input-wrapper input { font-size: 1rem; } + .tab-btn { padding: 0.75rem 0.85rem; } + .message-bubble { font-size: 0.92rem; } +} + +/* My Papers mobile responsiveness */ +@media (max-width: 768px) { + .mypapers-hero { padding: 2rem 0 1.5rem; } + .mypapers-hero h1 { font-size: 2rem; } + .mypapers-hero p { font-size: 1rem; } + .mypapers-actions { flex-direction: column; gap: 0.75rem; } + .refresh-papers-btn, .clear-all-btn { width: 100%; } + .papers-grid { grid-template-columns: 1fr; gap: 1rem; padding: 1rem 0; } + .paper-card-mypapers { padding: 1rem; } + .paper-card-actions { flex-direction: column; gap: 0.5rem; } + .paper-action-btn { width: 100%; } +} + +@media (max-width: 480px) { + .mypapers-hero { padding: 1.5rem 0 1rem; } + .mypapers-hero h1 { font-size: 1.75rem; } + .mypapers-icon-large { width: 60px; height: 60px; font-size: 1.5rem; } + .paper-card-mypapers { padding: 0.75rem; } + .paper-card-title { font-size: 1rem; } + .paper-card-meta { font-size: 0.8rem; } + .paper-action-btn { padding: 0.5rem 0.75rem; font-size: 0.8rem; } +} \ No newline at end of file