#syntax-tree-container {
  width: 100%;
  height: 400px;
  margin: 0px auto;
  border-radius: 8px;
  background-color: white;
  position: relative;
  overflow: hidden;
  display: block !important;
  visibility: visible !important;
  border: none !important;
}

#syntax-tree-container svg {
  width: 100%;
  height: 100%;
}

.syntax-tree-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 0px auto;
  display: block !important;
  visibility: visible !important;
  background-color: white;
  padding: 15px 15px 110px 15px;
  overflow: visible;
}

.syntax-tree-title {
  text-align: center;
  font-size: 24px;
  color: #ccc;
}

.syntax-tree-subtitle {
  text-align: center;
  font-size: 16px;
  color: #999;
}

.node circle, .node text, .temp-word circle, .temp-word text {
  cursor: pointer;
}

.node circle {
  fill: #2d3748;
  stroke: transparent;
  stroke-width: 2px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.node:hover circle {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transform: scale(1.05);
}



.node text {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  fill: #fff;
  transition: all 0.3s ease;
}

.node:hover text {
  font-size: 13px;
}

.link {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  transition: all 0.3s ease;
  opacity: 0.8;
}

.link:hover {
  stroke: #90cdf4;
  stroke-width: 3px;
  opacity: 1;
  filter: drop-shadow(0 1px 3px rgba(66, 153, 225, 0.3));
}

.language-title {
  fill: #90cdf4;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  /* font-weight: bold; */
}

.sentence-text {
  fill: #cbd5e0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
}

/* Part of speech background colors */
.node.pos-N text, .node.pos-noun text, .node.pos-NP text {
  background-color: #FFE0B2; /* Light orange for nouns and noun phrases */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-ADV text, .node.pos-adv text {
  background-color: #FFCDD2; /* Light red for adverbs */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-V text, .node.pos-verb text {
  background-color: #BBDEFB; /* Light blue for verbs */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-VP text {
  background-color: #C8E6C9; /* Light green for verb phrases */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-PRO text, .node.pos-pron text {
  background-color: #FFF9C4; /* Light yellow for pronouns */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-Intj text, .node.pos-intj text {
  background-color: #FFCCE6; /* Light pink for interjections */
  padding: 2px 5px;
  border-radius: 3px;
}

.node.pos-S text {
  background-color: #B2EBF2; /* Light cyan for sentences */
  padding: 2px 5px;
  border-radius: 3px;
}

/* Leaf node specific styling for parts of speech */
.leaf-node.pos-N text, .leaf-node.pos-noun text, .leaf-node.pos-NP text {
  background-color: #FFA726; /* More vibrant orange for leaf nodes */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-ADV text, .leaf-node.pos-adv text {
  background-color: #EF5350; /* More vibrant red for leaf nodes */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-V text, .leaf-node.pos-verb text {
  background-color: #42A5F5; /* More vibrant blue for leaf nodes */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-VP text {
  background-color: #66BB6A; /* More vibrant green for verb phrases */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-PRO text, .leaf-node.pos-pron text {
  background-color: #FFEE58; /* More vibrant yellow for leaf nodes */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-Intj text, .leaf-node.pos-intj text {
  background-color: #FF69B4; /* Hot pink for interjections */
  padding: 2px 5px;
  border-radius: 3px;
}

.leaf-node.pos-S text {
  background-color: #26C6DA; /* More vibrant cyan for sentences */
  padding: 2px 5px;
  border-radius: 3px;
}

/* Ensure leaf nodes also have hover effects */
.leaf-node:hover circle {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transform: scale(1.05);
}

.leaf-node:hover text {
  font-size: 13px;
}

@media (prefers-color-scheme: dark) {
  #syntax-tree-container {
    background-color: white;
  }
  
  .language-title {
    fill: #1a365d;
  }
  
  .sentence-text {
    fill: #2a4365;
  }
  
  .node circle {
    fill: white;
    stroke: transparent;
  }
  
  .node:hover circle {
    fill: #e8f0fe;
    stroke: transparent;
  }
  
  .node text {
    fill: #000;
  }
  
  .link {
    stroke: #000;
  }
  
  .link:hover {
    stroke: #444;
  }
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  #syntax-tree-container {
    height: 320px;
  }
  
  .syntax-tree-wrapper {
    padding: 10px;
    margin: 15px auto;
  }
  
  .syntax-tree-title {
    font-size: 20px;
  }
  
  .syntax-tree-subtitle {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #syntax-tree-container {
    height: 280px;
  }
  
  .syntax-tree-wrapper {
    padding: 8px;
    margin: 10px auto;
  }
  
  .syntax-tree-title {
    font-size: 18px;
  }
  
  .syntax-tree-subtitle {
    font-size: 12px;
  }
}