* { box-sizing: border-box; }

body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1117;
  color: #e6e6e6;
  margin: 0;
  padding: 0;
}

/* ===== Layout ===== */
.app-layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 280px;
  background: #12141c;
  border-right: 1px solid #2a2d3a;
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-header h2 {
  margin: 0 0 12px;
  font-size: 1.3em;
}

#new-search-btn {
  width: 100%;
  padding: 10px;
  background: #8ab4f8;
  color: #0f1117;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 20px;
  font-size: 0.95em;
}
#new-search-btn:hover { background: #a2c4fb; }

.sidebar-section-label {
  color: #6b7280;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.topic-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s ease;
}
.topic-item:hover { background: #1c1f2b; }
.topic-item.active { background: #22273a; border: 1px solid #8ab4f8; }

.topic-name {
  font-size: 0.9em;
  color: #e6e6e6;
  line-height: 1.3;
}
.topic-meta {
  font-size: 0.75em;
  color: #6b7280;
  margin-top: 2px;
  text-transform: capitalize;
}

.main-panel {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px;
}

/* ===== Header ===== */
header {
  padding: 8px 0 16px;
  border-bottom: 1px solid #2a2d3a;
}
h1 { margin: 0 0 4px; }
#topic-title {
  color: #e6e6e6;
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
}
#meta {
  margin-top: 8px;
  font-size: 0.9em;
  color: #9aa0ac;
}

/* ===== Chat bar ===== */
.chat-bar {
  display: flex;
  gap: 10px;
  margin: 0;
}
#topic-input {
  flex: 1;
  padding: 12px 16px;
  background: #171a23;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  color: #e6e6e6;
  font-size: 1em;
}
#topic-input:focus {
  outline: none;
  border-color: #8ab4f8;
}
#run-btn {
  padding: 12px 24px;
  background: #8ab4f8;
  color: #0f1117;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 1em;
}
#run-btn:hover:not(:disabled) { background: #a2c4fb; }
#run-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== Progress log ===== */
#progress-log {
  max-height: 160px;
  overflow-y: auto;
  background: #0b0d13;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 0.85em;
}
.log-line { padding: 2px 0; color: #9aa0ac; }

.hidden { display: none; }

/* ===== Sub-question cards ===== */
.sub-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.card {
  background: #171a23;
  border: 1px solid #2a2d3a;
  border-radius: 10px;
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.angle {
  font-weight: 600;
  color: #8ab4f8;
}

.coverage-badge, .cred-badge {
  color: #0f1117;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  white-space: nowrap;
}

.question {
  color: #cfd3dc;
  font-size: 0.95em;
}

.sources {
  margin-top: 8px;
}

.source {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #22252f;
  font-size: 0.85em;
}
.source a {
  color: #8ab4f8;
  text-decoration: none;
  flex: 1;
}
.source a:hover { text-decoration: underline; }
.source-type {
  color: #6b7280;
  font-size: 0.8em;
  white-space: nowrap;
}

/* ===== Gaps and actions ===== */
.gaps, .actions {
  margin-top: 32px;
}
.gaps h2, .actions h2 {
  font-size: 1.1em;
  margin-bottom: 12px;
}

.gap-item {
  background: #241a1a;
  border-left: 3px solid #e74c3c;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.actions ul {
  padding-left: 20px;
  margin: 0;
}
.actions li {
  margin-bottom: 6px;
  color: #cfd3dc;
  font-size: 0.9em;
}

/* ===== Notes & To-Dos ===== */
.ntd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 800px) {
  .ntd-grid { grid-template-columns: 1fr; }
}

.ntd-card {
  background: #171a23;
  border: 1px solid #2a2d3a;
  border-radius: 10px;
  padding: 16px;
}
.ntd-card h2 {
  font-size: 1.05em;
  margin: 0 0 10px;
}

#notes-area {
  width: 100%;
  min-height: 140px;
  background: #0b0d13;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  color: #e6e6e6;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
}
#notes-area:focus { outline: none; border-color: #8ab4f8; }

.ntd-hint {
  font-size: 0.75em;
  color: #6b7280;
  margin-top: 6px;
}

.todo-progress-bar {
  height: 8px;
  background: #0b0d13;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.todo-progress-fill {
  height: 100%;
  background: #2ecc71;
  width: 0%;
  transition: width 0.3s ease;
}

.todo-add-bar {
  display: flex;
  gap: 8px;
  margin: 14px 0 10px;
}
#todo-input {
  flex: 1;
  padding: 8px 10px;
  background: #0b0d13;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  color: #e6e6e6;
  font-size: 0.9em;
}
#todo-input:focus { outline: none; border-color: #8ab4f8; }
#add-todo-btn {
  padding: 8px 16px;
  background: #8ab4f8;
  color: #0f1117;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #22252f;
}
.todo-item .todo-text {
  flex: 1;
  font-size: 0.9em;
  color: #e6e6e6;
}
.todo-item.done .todo-text {
  text-decoration: line-through;
  color: #6b7280;
}
.todo-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.todo-delete {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 0.9em;
  padding: 2px 6px;
}
.todo-delete:hover { color: #e74c3c; }

.actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#gaps-to-todos-btn {
  padding: 6px 14px;
  background: #2ecc71;
  color: #0f1117;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85em;
  cursor: pointer;
}

.gap-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.gap-text { flex: 1; }
.expand-gap-btn {
  padding: 6px 12px;
  background: #22273a;
  color: #8ab4f8;
  border: 1px solid #8ab4f8;
  border-radius: 6px;
  font-size: 0.8em;
  cursor: pointer;
  white-space: nowrap;
}
.expand-gap-btn:hover { background: #2a3350; }

/* adding email field */
#email-input {
  width: 220px;
  padding: 12px 16px;
  background: #171a23;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  color: #e6e6e6;
  font-size: 0.95em;
}
#email-input:focus { outline: none; border-color: #8ab4f8; }

.chat-bar-wrapper {
  margin: 20px 0;
}
.input-labels-row {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.input-labels-row .input-label {
  display: block;
  font-size: 0.75em;
  color: #9aa0ac;
}
.input-labels-row .input-label:first-child {
  flex: 1;
}
.input-labels-row .input-label:last-child {
  width: 352px;
  flex-shrink: 0;
}