@font-face {
  font-family: "Relay";
  src: url("/assets/fonts/Relay/Relay-Regular.woff2") format("woff2"),
       url("/assets/fonts/Relay/Relay-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: "Relay", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem; /* bigger than .9em; adjust as needed */
}
 
 .res_post {
        position: relative; /* Add relative positioning to the parent div */
        border: 1px solid #666;
        padding: 10px;
        margin: 10px;
 		margin-bottom: 20px;
    }

    /* Style the strong (key) elements */
    .res_post strong {
        color: #999;
    	font-weight: normal;
    }

    /* Style the value elements */
    .res_post span {
        color: #ddd;
    }
    .res_post p {
       padding: 2px;
       margin:0;
    }
.enginioes {
        position: absolute; /* Position the engines div absolutely */
        bottom: -10px; /* Adjust this value to control the vertical positioning */
        right: 10px; /* Right margin of 10px */
        background-color: #333; /* Dark grey background */
        color: #f9f9f9; /* Light grey text */
        padding: 5px 10px; /* Padding for the engines div */
        border: 1px solid #666;
        border-radius: 5px; /* Rounded corners */
    }

.highlight {
  color: limegreen; /* Change this to your desired text color within the highlight */
}
.content {font-size:.14em;margin:0;padding:0;max-width:56em;word-wrap:break-word;line-height:1.36}

.audio-control-psql audio{width:100%;padding:10px 0 0 0}

/* ---- Vane AI Search Result Styling ---- */

/* Vane AI answer box */
#answers .answer {
  padding: 16px 20px;
  margin: 10px 0 20px 0;
  border-left: 3px solid #3636CA;
  border-radius: 0 8px 8px 0;
  background: rgba(108, 92, 231, 0.06);
}

/* Vane AI answer text */
#answers .answer span {
  line-height: 1.7;
  font-size: 0.95rem;
}

#answers .answer p {
  margin: 0.6em 0;
}

#answers .answer h1,
#answers .answer h2,
#answers .answer h3,
#answers .answer h4 {
  color: #7E7EBB;
  margin-top: 1em;
}

/* Vane citation links [1], [2], etc. */
#answers .answer span a[href^="http"],
#answers .answer sup a {
  color: #7E7EBB;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8em;
  vertical-align: super;
  padding: 0 1px;
}

#answers .answer span a[href^="http"]:hover,
#answers .answer sup a:hover {
  text-decoration: underline;
  color: #dfe6e9;
}

/* Vane source results styling */
.result[data-engine="perplexica"] {
  border-left: 2px solid #3636CA;
  padding-left: 12px;
  margin-bottom: 8px;
}

/* Vane streaming answer */
.vane-answer {
  position: relative;
}

.vane-content {
  min-height: 1.5em;
}

.vane-content .loading {
  color: #ddd;
  font-style: italic;
  opacity: 0.7;
}

.vane-content .loading::after {
  content: '';
  animation: vane-dots 1.5s steps(4, end) infinite;
}

@keyframes vane-dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

.vane-error {
  color: #e74c3c;
  font-style: italic;
}

.vane-sources {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(108, 92, 231, 0.2);
}

/* Streaming cursor effect */
.vane-content::after {
  content: '|';
  animation: vane-blink 1s step-end infinite;
  color: #ddd;
  font-weight: bold;
  margin-left: 2px;
}

.vane-content.stream-done::after {
  display: none;
}

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