@import url('tokenization.css');

/* Optimized Academy Interface - tsingular.ru style */
:root {
  --primary-color: #1B3A5C;
  --bg-site: #FAFAFA;
  --text-main: #1A1A1A;
  --border-clean: #E5E7EB;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background: white;
  margin: 0;
  line-height: 1.6;
}

header { display: none; } /* Site handles header */

/* Sticky Tabs Navigation */
.edu-top-nav {
  position: sticky;
  top: 0;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-clean);
}

.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
}

.tab-link {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #6B7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  white-space: nowrap;
}

.tab-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Page Container */
.edu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Tab & Subtab Content */
.tab-content {
  display: none;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-content.active {
  display: block;
}

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

/* Horizontal Pill Navigation for Subtabs */
.subtabs-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.subtab-link {
  background: #F3F4F6;
  border: 1px solid transparent;
  padding: 10px 24px;
  border-radius: 9999px;
  font-weight: 500;
  color: #4B5563;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.subtab-link.active {
  background: var(--primary-color);
  color: white;
}

/* Content Cards & UI Elements */
.edu-card {
  background: #F9FAFB;
  border: 1px solid var(--border-clean);
  padding: 32px;
  border-radius: 2rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.edu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.viz-area {
  background: #fff;
  border: 1px solid var(--border-clean);
  border-radius: 2.5rem;
  margin-top: 30px;
  overflow: hidden;
  height: 500px;
}

/* Inputs & Form Elements */
.edu-input-group {
  margin-bottom: 40px;
}

.input-flat {
  width: 100%;
  padding: 16px 24px;
  border-radius: 1.25rem;
  border: 1px solid var(--border-clean);
  background: #F9FAFB;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.input-flat:focus {
  outline: none;
  border-color: var(--primary-color);
  background: #fff;
}

.btn {
  padding: 14px 28px;
  border-radius: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-outline:hover {
  background: var(--primary-color);
  color: white;
}

/* Grids */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.edu-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: #9CA3AF;
  border: 2px dashed #E5E7EB;
  border-radius: 2.5rem;
  font-size: 1.25rem;
}

/* Tutorial Navigation Inside Tabs */
.tutorial-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  border-bottom: 1px solid #F3F4F6;
  padding-bottom: 15px;
}

.tutorial-nav-btn {
  background: none;
  border: none;
  color: #6B7280;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.tutorial-nav-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
  height: auto !important;
  min-height: auto;
  margin-bottom: 30px; /* Add some bottom margin */
  padding-bottom: 10px; /* Add some bottom padding */
}

/* Make sure deep nested content is properly visible */
.tutorial-content,
.app-card-content, 
.application-feature,
.vector-db-grid,
.future-trends {
  overflow: visible;
  height: auto !important;
}

/* Ensure proper layering with transparent backgrounds */
header, .tabs, .subtabs, .tutorial-nav {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Tab and Subtab Navigation Styles - Simplified sticky adjustments */
nav ul.tabs,
.subtabs,
.tutorial-nav {
  /* Keep display flex, overflow-x, padding-bottom, margin-bottom, position sticky, background, z-index */
  /* Adjusted top values already applied earlier */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tab-link,
.subtab-link,
.tutorial-nav-btn {
  white-space: nowrap; /* Prevent text wrapping */
  padding: 5px 5px; /* Consistent smaller padding */
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Z-index and Positioning for Content */
.tab-content {
  position: relative;
  z-index: 1;
  padding-top: 30px; /* Increased padding */
  margin-top: 60px; /* Increased margin to account for fixed elements */
}

.subtab-content {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: 30px; /* Increased margin */
  padding-top: 20px; /* Increased padding */
}

.subtab-content.active {
   display: block; /* Show active subtab content */
}


.tutorial-nav-btn.active {
   background-color: var(--tutorial-nav-active-bg);
   color: var(--tutorial-nav-active-text);
   box-shadow: 0 2px 0 var(--tutorial-nav-active-border);
   padding-top: 5px; /* Increased top padding */
   padding-bottom: 5px; /* Increased bottom padding */
   position: relative;
   z-index: 999; /* Higher z-index */
   transform: translateY(-2px); /* Move up slightly */
}

/* Remove redundant top padding rules for main/content */
/* Let the sticky positioning handle the flow */

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 130px; /* Increased from 120px to 130px */
  }
  header {
    padding: 8px 10px; /* Increased from 6px to 8px */
    height: 60px; /* Set explicit height for mobile */
  }
  .tabs {
    top: 60px; /* Increased from 45px to 60px */
    padding: 5px 5px; /* Increased padding */
  }
  .subtabs {
    top: 100px; /* Increased from 85px to 100px */
    padding: 5px 5px; /* Increased padding */
  }
  .tutorial-nav {
    top: 140px; /* Increased from 125px to 140px */
    padding: 5px 5px; /* Increased padding */
  }

  .tab-link, .subtab-link, .tutorial-nav-btn {
     padding: 5px 5px; /* Smaller padding */
     font-size: 0.9rem; /* Smaller font */
  }

  .tab-content, .subtab-content, .tutorial-content {
    padding: 10px; /* Reduced padding */
  }

   /* Ensure proper scrolling on mobile */
   .tutorial-section.active,
   .subtab-content.active {
     padding-bottom: 40px; /* Add extra padding at bottom for better scrolling */
   }
}

/* Ensure sticky headers have solid background */
header, .tabs, .subtabs, .tutorial-nav {
   background-color: var(--bg-color); /* Ensure solid background */
}

/* Word Analogies Demo Styles */
.analogy-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.preset-selection {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preset-selection select {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-size: 14px;
  background-color: #f9f9f9;
}

.custom-analogy {
  border: 1px solid #e0e0e0;
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.analogy-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 10px 0;
}

.analogy-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.analogy-input-group input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.analogy-result {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.analogy-result span {
  padding: 8px;
  background-color: #e8f4fc;
  border-radius: 4px;
  min-height: 19px;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  color: #3498db;
}

.formula-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 24px;
  font-weight: bold;
}

#formula-a, #formula-c {
  color: #3498db;
}

#formula-b, #formula-d {
  color: #e74c3c;
}

.analogy-explanation {
  margin-top: 15px;
  padding: 12px;
  background-color: #f2f9ff;
  border-left: 4px solid #3498db;
  border-radius: 0 4px 4px 0;
}

.analogy-explanation p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}

/* Visualization container styles */
.visualization-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

@media (min-width: 1024px) {
  .visualization-container {
    flex-direction: row;
  }
  
  .visualization-container .visualization {
    flex: 1;
    min-width: 45%;
  }
}

.plot-container {
  min-height: 350px;
  width: 100%;
  position: relative;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

/* Only add fullscreen toggles to visualization elements */
.fullscreen-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9000;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.fullscreen-toggle:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

/* Ensure full-width charts in fullscreen mode */
.js-plotly-plot.plotly-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
}

/* Related words inline styles */
.related-words-inline {
  margin-top: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #4b7bec;
}

.related-words-heading {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.related-words-inline ul {
  list-style: none;
  padding-left: 10px;
  margin: 5px 0;
}

.related-words-inline li {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
  font-size: 14px;
}

.related-word {
  font-weight: 500;
  margin-right: 5px;
}

.similarity-value {
  color: #666;
  font-size: 13px;
}

.word-embedding {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;
}

.word-label {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.similarity-info {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 10px 15px;
  border-radius: 6px;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.similarity-label {
  font-weight: 500;
}

.navigation-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Make results container in clustering tab vertical */
#embedding-clustering .results-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#embedding-clustering .visualization-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#embedding-clustering .visualization {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

#embedding-clustering .cluster-display {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

#embedding-clustering .fullscreen-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#embedding-clustering .fullscreen-toggle:hover {
  opacity: 1;
}

#embedding-clustering .plot-container {
  width: 100%;
  height: 400px;
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 10px;
}

/* Restore tutorial-nav container that was accidentally removed */
.tutorial-nav {
  position: fixed;
  top: 155px;
  left: 0;
  right: 0;
  z-index: 997;
  background-color: var(--bg-color);
  padding: 10px calc(50% - 600px);
  width: 100%;
  max-width: 100%;
  height: 50px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-bottom: 1px solid var(--border-color);
}

/* Fullscreen element styles */
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background-color: white !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.fullscreen .fullscreen-toggle {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 10000 !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Styles for visualization containers to ensure proper button positioning */
.visualization {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.plot-container,
#plot-container-tab1,
#plot-container-tab2-3d,
#plot-container-tab2-2d,
#plot-container-tab3 {
  position: relative;
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

/* Make sure Plotly containers have proper size in fullscreen */
.fullscreen #plot-container-tab1,
.fullscreen #plot-container-tab2-3d,
.fullscreen #plot-container-tab2-2d,
.fullscreen #plot-container-tab3,
.fullscreen #plot-container-tab3-2d {
  width: 100% !important;
  height: 90vh !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Fix height of containers going into fullscreen */
#plot-container-tab1,
#plot-container-tab2-3d,
#plot-container-tab2-2d,
#plot-container-tab3,
#plot-container-tab3-2d {
  position: relative !important;
  height: 450px !important; /* Explicit height */
  width: 100% !important;
  overflow: visible !important;
}

/* Fix for Plotly container in fullscreen */
.fullscreen .js-plotly-plot,
.fullscreen .plot-container.plotly {
  height: 85vh !important;
  width: 95% !important;
  margin: 0 auto !important;
}

/* Fix for Plotly canvas and SVG elements */
.fullscreen .js-plotly-plot .plot-container.plotly svg,
.fullscreen .js-plotly-plot .plot-container.plotly canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Fix for main containers */
.tab-content .visualization {
  position: relative !important;
  margin-bottom: 30px !important;
}

/* Fix controls for fullscreen elements */
.fullscreen .plotly-notifier, 
.fullscreen .js-plotly-plot .plotly .modebar {
  z-index: 10001 !important;
  position: fixed !important;
  top: 10px !important;
}

/* Fix z-index for Plotly hover tooltips in fullscreen */
.plotly-notifier, 
.js-plotly-plot .plotly .modebar,
.js-plotly-plot .plotly .svg-container {
  z-index: 9500 !important;
}

/* Ensure fullscreen elements are always on top */
body.has-fullscreen .fullscreen {
  z-index: 9999 !important;
}

:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

:-moz-full-screen {
  width: 100% !important;
  height: 100% !important;
}

:-ms-fullscreen {
  width: 100% !important;
  height: 100% !important;
}

:fullscreen {
  width: 100% !important;
  height: 100% !important;
}