/* ===== Variables ===== */
:root { --sidebar-bg: linear-gradient(135deg, #0b1220, #111827); --main-bg: #0f172a; --accent: #60a5fa; --accent-dark: #1e40af; --text: #e2e8f0; --text-light: #fff; --card-bg: #111827; --input-bg: #0b1220; --border-rad: 14px; --shadow: 0 6px 24px rgba(0,0,0,0.35); --transition: 0.25s cubic-bezier(.2,.8,.2,1); }
  
  /* ===== Dark Mode ===== */
  @media (prefers-color-scheme: dark) {
    :root {
      --sidebar-bg: linear-gradient(135deg, #232526, #414345);
      --main-bg: #20232a;
      --card-bg: #262d37;
      --text: #e7ebf0;
      --input-bg: #242830;
      --shadow: 0 6px 24px 0 rgba(0,0,0,0.7);
    }
  }
  
  /* ===== Reset & Body ===== */
  * { box-sizing: border-box; }
  body { margin:0; padding:0; min-height:100vh; font-family: system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background: var(--main-bg); color: var(--text); display:flex; flex-direction:column; transition: background 0.3s ease }
  
  /* ===== Top Container ===== */
  #top-container { display:none !important }
  
  .nav-links {
    display: flex;
    flex-direction: row; /* Horizontal aligned */
    gap: 20px; /* Spacing between links */
  }
  
  .nav-links a { position:relative; padding:10px 14px; background:#ffffff; border:1px solid var(--border); border-radius:10px; color:#0f172a; font-weight:500; text-decoration:none; font-size:1rem; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(15,23,42,.04) }
  .nav-links a:hover, .nav-links a:focus { border-color:#cbd5e1; box-shadow:0 0 0 4px rgba(37,99,235,0.25) }
  
  /* ===== Main Content ===== */
  .main {
    flex: 1;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    min-height: 100vh;
    animation: fadeInUp 0.9s;
  }
  
  /* Card Styles */
  .question-box, .answer-box { width: 100%; max-width: 95vw; background: var(--card-bg); border-radius: var(--border-rad); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; position: relative; overflow: hidden; animation: popIn 0.5s; border:1px solid var(--border) }
  .question-title {
    font-size: smaller;
  }
  .question-box h2, .answer-box h2 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--accent);
    letter-spacing: 1px;
    font-weight: 600;
  }
  
  
  .question-box p, .answer-box p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.7;
  }

.ansdet {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0.95;
}

.ansdet small {
    display: flex;
    gap: 1rem;
}

.follow-upbox {
  width: 95%;
  background-color: #2a2a40;
  color: white;
}
  
  /* ===== Follow-up Box ===== */
  .follow-up  {
    display: flex; /*flex*/
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border-radius: var(--border-rad);
    width: 100%;
    max-width: 96vw;
    padding: 20px 22px;
    margin-top: 15px;
    animation: fadeInUp 0.7s;
  }
  
  .follow-up input[type="text"] {
    flex: 1;
    font-size: 1.08rem;
    padding: 10px 17px;
    border-radius: var(--border-rad);
    border: 1.5px solid #dde6ff;
    outline: none;
    background: var(--input-bg);
    color: var(--text);
    transition: border 0.2s, box-shadow 0.2s;
  }
  
  .follow-up input[type="text"]:focus {
    border: 2px solid var(--accent);
  }
  
  .follow-up button {
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    padding: 11px 28px;
    border-radius: var(--border-rad);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(79,140,255,0.14);
    transition: background var(--transition);
  }
  
  .follow-up button:hover, .follow-up button:focus {
    background: var(--accent-dark);
  }
  .instructions {
    color: white;
    margin-bottom: 20px;
}

.instructions h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 10px;
}

.instructions ul {
    list-style-type: none;
    padding-left: 20px;
}

.instructions ul li {
    font-size: 1rem;
    margin-bottom: 10px;
}

/* Make the nav-links display inline-flex */
.instructions .nav-links {
    display: inline-flex; /* Align the items horizontally */
    align-items: center; /* Vertically center the button */
    gap: 10px; /* Space between the link text and the button */
}

/* Style the Ask AI button */
.instructions .ask-ai-button {
    background: var(--accent); /* Color from your variables */
    color: white;
    padding: 8px 18px;
    border-radius: var(--border-rad);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.3s;
}

.instructions .ask-ai-button:hover {
    background: var(--accent-dark); /* Darken on hover */
}textarea {
  width: 100%;
  height: 90px;
  border: none;
  border-radius: 8px;
  padding: 1rem;
  font-size: 1rem;
  resize: none;
  background: #181828;
  color: #fff;
  transition: box-shadow 0.3s ease;
}

textarea:focus {
  box-shadow: 0 0 10px #00ffd5;
  outline: none;
}

#askBtn {
  background: #00ffd5;
  color: #000;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#askBtn:hover {
  background: #00ccaa;
}
  
  /* ====== Animations ====== */
  @keyframes slideInLeft {
    0% { transform: translateX(-100px); opacity: 0;}
    100% { transform: translateX(0); opacity: 1; }
  }
  @keyframes fadeInUp {
    0% { transform: translateY(44px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1;}
  }
  @keyframes popIn {
    0% { transform: scale(0.92); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
  }
  
  /* ===== Responsive Design ===== */
  @media (max-width: 700px) {
    .sidebar {
      display: none; /* Hide sidebar on small screens */
    }
    #top-container { display:none !important }
    .nav-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* Center links */
      gap: 10px; /* Add some space between links */
    }
    .main {
      padding: 16px 0;
      align-items: center; /* Center items */
    }
    .question-box, .answer-box, .follow-up {
      width: 95%;
      max-width: 95vw;
      padding: 12px !important; /* Responsive padding */
    }
  }

  table {
    width: 85%;
    border-collapse: collapse;
    border: 1px solid #ccc;
    margin: 20px 0;
  }

/* ===== Related links on answer page ===== */
.related h3 {
  font-size: 1.2rem;
  color: var(--accent);
  margin: 8px 0 10px 0;
}
.related-links { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 8px;
}
.related-links li { 
  background: var(--card-bg); 
  border-radius: 10px; 
  box-shadow: var(--shadow); 
  padding: 10px 12px;
}
.related-links a { color: var(--accent); text-decoration: none }
.related-links a:hover { 
  text-decoration: underline; 
}

/* ===== SEO copy block ===== */
.seo-copy h3 { 
  color: var(--accent); 
}
.seo-copy p { 
  color: #374151; 
  line-height: 1.7; 
  margin: 6px 0; 
}
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap; /* Ensures width fits content */
  }
  
  th {
    background-color: #333;
    color: #fff;
  }
  
  td {
    background-color: #1e1e1e;
    color: #f1f1f1;
  }
  pre {
    position: relative;
    padding-left: 40px;
    margin: 0;
}

pre code {
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.katex-display>.katex {
  display: block;
  text-align: left !important; 
  white-space: nowrap;
}


body {
  overflow-x: auto;
}

.aianswer {
  overflow-x: auto;
}

.question-answer-box{
  width: 95%;
}

.vip-switch {
  position: relative;
  display: inline-block;
  width: 70px; /* Bigger width */
  height: 36px; /* Bigger height */
}

.vip-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.vip-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, #bbb, #bbb);
  transition: 0.4s;
  border-radius: 36px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.vip-slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.vip-switch input:checked + .vip-slider {
  background: linear-gradient(90deg, #4facfe, #00f2fe); /* Blue gradient when ON */
}

.vip-switch input:checked + .vip-slider:before {
  transform: translateX(34px); /* Moves the circle */
}

/* Optional: add pointer on hover */
.vip-slider:hover {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}

#togglediv { display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:6px 8px }

.copybtn { background: #2563eb; color:#fff; padding:10px 14px; font-size:14px; font-weight:600; border:none; border-radius:10px; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04); transition: all .2s ease }
.copybtn:hover { filter:brightness(.95); box-shadow:0 6px 18px rgba(37,99,235,.25) }
.copybtn:active { transform: scale(0.98) }

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.answer-header h2 {
  margin: 0;
}

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.answer-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* small space between toggle and copy button */
}

/* Optional: make togglediv contents a little more compact */
#togglediv {
  display: flex;
  align-items: center;
  gap: 5px;
}

#vieworiginal{
    display: flex;
    justify-content: center;
}

#downloadBtn{ background:#10b981; color:#fff; padding:8px 14px; border-radius:10px; border:none }

/* ===== Voting UI ===== */
.vote-wrap { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px; background:#0b1220; border:1px solid #1f2937; border-radius:12px; padding:8px 10px }
.vote-title { color:#e5e7eb; font-size:.95rem; font-weight:600 }
.vote-buttons { display:flex; align-items:center; gap:8px }
.vote-btn { background:linear-gradient(180deg,#1f2937,#111827); color:#e5e7eb; border:1px solid #374151; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:600 }
.vote-btn:hover { filter:brightness(1.05); box-shadow:0 6px 18px rgba(37,99,235,.25) }
.vote-status { color:#94a3b8; font-size:.85rem; margin-left:6px }