:root{
  --bg:#ffffff; --text:#111111; --muted:#6b7280;
  --border:#9ca3af;
  --accent:#2563eb;
  --radius-big:32px;
  --radius-sm:12px;
  --colW:min(860px, calc(100vw - 100px));
  --rule:#d1d5db;
  --suggest-bg:#f8fafc;
  --suggest-border:#cbd5e1;

  /* History chips (distinct from inputs, but same radius) */
  --history-bg:#000000;      /* lighter neutral grey */
  --history-border:#d1d5db;  /* neutral border */
  --history-text:#FAF9F9;    /* slate-800 */
}
@media (prefers-color-scheme: dark){
  :root{
    /* keep background white, only adjust accents */
    --text:#111111;
    --muted:#6b7280;
    --border:#9ca3af;
    --rule:#d1d5db;
    --suggest-bg:#f8fafc;
    --suggest-border:#cbd5e1;

  --history-bg:#000000;      /* lighter neutral grey */
  --history-border:#d1d5db;  /* neutral border */
  --history-text:#FAF9F9;    /* slate-800 */
  }
}

/* Reset-ish */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

sup a{ color:inherit; text-decoration:none; }
sup a:hover{ text-decoration:underline; }

/* Layout */
.wrap{ min-height:100dvh; display:grid; grid-template-rows:auto auto 1fr auto; }
.container{ width:var(--colW); margin:0 auto; }

.logo{ width:100%; padding:0; }
.logo-img{ display:block; width:100%; height:auto; }

/* Hero */
.hero{ text-align:center; padding:18px 0 8px; }
.hero h1{ margin:0 0 12px; font-size:clamp(26px,4.5vw,32px); font-weight:800; }

/* Disclaimer */
.disclaimer{
  width:var(--colW);
  margin:0 auto 10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-align:center;
}

/* History list */
.history{ width:var(--colW); margin:8px auto 4px; }
.history-item{ margin:8px 0; border:0; }
.history-item > summary{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:revert;
}
.history-item > summary::-webkit-details-marker{ margin-right:6px; }

/* History entries (rectangular like the question input) */
.summary-pill{
  flex:1;
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--history-border);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  color:var(--history-text);
  background:var(--history-bg);
  font-style:normal;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.summary-pill:hover{ filter:brightness(0.98); }

/* Prompt input */
.prompt-wrap{ width:var(--colW); margin:0 auto 10px; }
#promptInput{
  width:100%;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--text);
  padding:10px 14px;
  font-size:18px;
  outline:none;
}
#promptInput::placeholder{ color:#b0b0b0; }

/* Follow-up input */
.follow-up-wrap{
  width: var(--colW);
  margin: 10px auto 10px;
  display: none;
}
#followUpInput{
  width:100%;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--text);
  padding:10px 14px;
  font-size:18px;
  outline:none;
}
#followUpInput::placeholder{ color:#b0b0b0; }

/* Loading */
.loading{
  display:none;
  text-align:center;
  margin:18px auto;
  width:var(--colW);
}
.spinner{
  width:36px; height:36px;
  margin:8px auto;
  border-radius:50%;
  border:3px solid #e5e7eb;
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Answer bubble */
.qa{ width:var(--colW); margin:14px auto 0; }
.qa-bubble{
  border:2px solid var(--border);
  border-radius:var(--radius-big);
  background:#fff;
  padding:18px 20px;
  line-height:1.6;
  min-height:360px;
}
#answer{ white-space:pre-wrap; }

/* Suggestion box */
.suggest{
  width:var(--colW);
  margin:14px auto 0;
  background:var(--suggest-bg);
  border:2px dashed var(--suggest-border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  display:none;
}
.suggest-title{ font-weight:800; margin:0 0 6px; }
.suggest-q{ margin:0 0 10px; font-style:italic; }
.suggest-actions{ display:flex; gap:8px; }

.btn{
  border:2px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ filter:brightness(0.97); }
.btn-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

/* References */
.divider{
  width:var(--colW);
  margin:22px auto 0;
  border:0;
  border-top:1px solid;
  height:0;
  border-color:var(--rule);
}
.refs{ width:var(--colW); margin:10px auto 24px; }
.refs h3{ margin:10px 0 8px; font-size:16px; font-weight:800; }
.ref{ margin:10px 0; }
.ref .section{ font-weight:700; margin-bottom:2px; }
.ref .link{ display:block; }
.ref .meta{ color:var(--muted); font-size:13px; }

/* Legacy elements hidden */
#questionInput, .legacy-button{ display:none; }