:root{
  --bg:#0b1020;
  --card:#0f152b;
  --muted:#9aa3b2;
  --text:#eaf1ff;
  --brand:#6aa6ff;
  --brand-2:#9a6aff;
  --ok:#32d296;
  --warn:#ffd166;
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --focus:#b2d4ff;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1400px 900px at 10% 0%, #1a2140 0%, transparent 60%),
    radial-gradient(1400px 900px at 90% 10%, #251a40 0%, transparent 60%),
    var(--bg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
  background-size: 1600px 1000px, 1600px 1000px, auto;
}

/* Accessibility helpers */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:16px; top:12px; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; border-radius:8px }
*:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:8px }

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(12,16,34,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:1100px; margin:auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  color:var(--text); font-weight:800; text-decoration:none; letter-spacing:.3px; font-size:1.15rem;
}
.brand span{ color:var(--brand) }
.nav-links{
  list-style:none; display:flex; gap:14px; margin:0; padding:0;
}
.nav-link{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;
}
.nav-link:hover,.nav-link.active{ color:var(--text); background:rgba(255,255,255,.06) }
.nav-toggle{ display:none; background:transparent; color:var(--text); font-size:1.25rem; border:none }

/* Hero */
.section{ padding:64px 18px }
.hero{
  display:grid; place-items:center; text-align:center;
  min-height:55vh; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:-20%;
  background: radial-gradient(600px 300px at 50% 0%, rgba(106,166,255,.15), transparent 60%),
              radial-gradient(600px 300px at 50% 100%, rgba(154,106,255,.1), transparent 60%);
  pointer-events:none;
}
.hero .hero-content{ max-width:900px }
h1{ font-size:clamp(1.8rem, 3vw, 3rem); margin:0 0 12px }
h2{ font-size:1.4rem; margin:0 0 14px }
.muted{ color:var(--muted) }
.center{ text-align:center }

.btn{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border:none; padding:10px 16px; border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .08s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn.ghost{
  background:transparent; border:1px solid rgba(255,255,255,.16);
}
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btn .spinner{ display:none; width:14px; height:14px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; margin-right:8px; animation:spin 1s linear infinite }
.btn.loading .spinner{ display:inline-block }
.btn.loading .btn-label{ opacity:.9 }
@keyframes spin{ to{ transform:rotate(360deg) } }

.card{
  max-width:1000px; margin:24px auto;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; box-shadow:var(--shadow);
}

/* Empty state */
.empty-state{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); padding:18px; border:1px dashed rgba(255,255,255,.12); border-radius:12px; background:rgba(0,0,0,.15); margin-bottom:12px }
.empty-icon{ font-size:20px; opacity:.9 }

/* Analyze */
.upload-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.upload-row input[type="file"]{
  background:var(--card); color:var(--text); border:1px dashed rgba(255,255,255,.18);
  padding:10px; border-radius:12px; width:320px; max-width:100%;
}
.status{ margin-top:10px; color:var(--muted) }
.or-divider{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px 0; color:var(--muted) }
.or-divider::before,.or-divider::after{
  content:""; height:1px; width:80px; background:rgba(255,255,255,.12);
}
.ask-row{ display:flex; gap:10px; flex-wrap:wrap }
.ask-row input{
  flex:1; min-width:260px; background:var(--card); color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px;
}

/* Results */
.flex-header{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.pill{
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08);
  color:var(--muted); font-size:.9rem;
}
.tabs{ display:flex; gap:10px; margin:10px 0 12px }
.tab-btn{
  flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:var(--muted); padding:8px 10px; border-radius:12px; cursor:pointer;
}
.tab-btn.active{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff }
.tab-content{
  display:none; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px; min-height:90px; white-space:pre-wrap; line-height:1.5;
}
.tab-content.active{ display:block }

/* Smooth fade for content areas */
.tab-content, .timeline, .risk-grid{ transition:opacity .2s ease, transform .2s ease }
.tab-content.enter, .timeline.enter, .risk-grid.enter{ opacity:0; transform:translateY(4px) }
.tab-content.enter.active, .timeline.enter.ready, .risk-grid.enter.ready{ opacity:1; transform:none }

/* Timeline */
.timeline{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.timeline li{
  background:rgba(255,255,255,.04); border-left:4px solid var(--brand);
  padding:10px 12px; border-radius:10px; color:var(--text);
}

/* Risks */
.risk-grid{ list-style:none; padding:0; margin:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.risk-grid li{
  background:rgba(255,255,255,.04); border-left:4px solid var(--danger);
  padding:12px; border-radius:12px;
}

/* Footer */
footer{ opacity:.8 }

/* Chatbot */
.chat-toggle{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:54px; height:54px; border-radius:999px; border:none; cursor:pointer;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-size:20px;
}
.chat-panel{
  position:fixed; right:18px; bottom:84px; width:360px; max-width:92vw;
  height:520px; background:rgba(13,18,40,.98);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:var(--shadow);
  display:none; flex-direction:column; overflow:hidden; z-index:70;
}
.chat-panel.open{ display:flex; animation:pop .12s ease-out }
@keyframes pop{ from{transform:translateY(8px); opacity:.6} to{transform:none; opacity:1} }
.chat-header{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.icon-btn{ background:transparent; border:none; color:var(--text); font-size:18px; cursor:pointer }
.chat-messages{
  padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px; flex:1;
}
.msg{
  padding:10px 12px; border-radius:12px; max-width:82%;
  box-shadow:0 4px 14px rgba(0,0,0,.18); white-space:pre-wrap; line-height:1.45;
}
.msg.user{ margin-left:auto; background:linear-gradient(135deg, #3a7bd5, #3a6073); color:#fff }
.msg.bot{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06) }
.msg.thinking{ opacity:.75; font-style:italic }
.chat-input{ display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.08) }
.chat-input input{
  flex:1; background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px 12px;
}

/* Contextualizer Styles */
.contextualizer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: start; /* Align items to top to prevent stretching */
}

.context-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content; /* Prevent stretching */
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.form-row label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-row select,
.form-row input {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.form-row select {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-row select:hover {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.form-row select:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);
}

.form-row select option {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #1a1a1a;
  padding: 0.75rem;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  text-shadow: none;
}

.form-row select option:hover {
  background: var(--accent-color);
  color: white;
  font-weight: 600;
}

.form-row select option:checked {
  background: var(--accent-color);
  color: white;
  font-weight: 600;
}

/* Enhanced glass effect for input fields too */
.form-row input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-row input:hover {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.form-row input:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Glass effect for textarea */
.text-selection {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content; /* Prevent stretching */
  min-height: 0; /* Allow shrinking */
}

.text-selection label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-selection textarea {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  resize: vertical;
  min-height: 120px;
  max-height: 200px; /* Prevent excessive height */
  width: 100%;
  box-sizing: border-box;
}

.text-selection textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Fix button container */
.text-selection .btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure buttons don't overlap */
.text-selection button + button {
  margin-top: 0.5rem;
}

.contextualizer-result {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
}

.contextualizer-result h3 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
}

.explanation-content {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--accent-color);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.used-hints {
  background: var(--bg-primary);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
}

.used-hints h4 {
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.used-hints ul {
  margin: 0;
  padding-left: 1.25rem;
}

.used-hints li {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Responsive design for contextualizer */
@media (max-width: 768px) {
  .contextualizer-controls {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .text-selection {
    order: 2; /* Move text selection below form on mobile */
  }
  
  .context-form {
    order: 1;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* Responsive nav */
@media (max-width: 860px){
  .nav-toggle{ display:block }
  .nav-links{
    position:absolute; right:12px; top:58px; background:rgba(12,16,34,.95);
    border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px; flex-direction:column;
    display:none; min-width:200px;
  }
  .nav-links.open{ display:flex }
}

/* Fix any potential overflow issues */
.contextualizer-controls * {
  box-sizing: border-box;
}

/* Ensure proper spacing for the entire section */
#contextualizer {
  padding: 2rem;
  overflow: hidden; /* Prevent any content from overflowing */
}

#contextualizer .section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}