/* ── Memory Browser styles ───────────────────────────────────────────── */

.mem-body {
  overflow: auto;
  display: block;
  height: 100dvh;
}

/* ── Topbar ────────────────────────────────────────────────────────── */

#mem-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

#mem-back {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-sec);
  text-decoration: none;
  font-size: 13px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  transition: color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
#mem-back:hover { color: var(--text); background: var(--border); }

#mem-topbar h1 {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

#mem-status { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Tabs ──────────────────────────────────────────────────────────── */

#mem-tabs {
  display: flex;
  gap: 2px;
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.mem-tab {
  background: none;
  border: none;
  color: var(--text-sec);
  font-size: 13px;
  font-family: var(--font-body);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--duration), background var(--duration);
}
.mem-tab:hover { color: var(--text); background: var(--border); }
.mem-tab.active { color: var(--accent); background: var(--accent-glow); }

/* ── Tab content ───────────────────────────────────────────────────── */

.mem-tab-content { display: none; }
.mem-tab-content.active { display: block; }

/* ── Toolbar ───────────────────────────────────────────────────────── */

.mem-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.mem-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mem-actions { display: flex; gap: var(--sp-2); }

.filter-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration);
}
.filter-btn:hover { border-color: var(--border-hover); color: var(--text); }
.filter-btn.active { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-glow); }

.btn-sm {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
}
.btn-sm:hover { color: var(--text); border-color: var(--border-hover); }

.btn-danger-sm {
  background: none;
  border: 1px solid var(--red-dim);
  color: var(--red);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
}
.btn-danger-sm:hover { background: rgba(199, 91, 91, 0.1); }

.btn-accent {
  background: var(--accent);
  border: none;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 6px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--duration);
}
.btn-accent:hover { opacity: 0.85; }

/* ── Stats bar ─────────────────────────────────────────────────────── */

.mem-stats {
  padding: var(--sp-2) var(--sp-5);
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

/* ── List ──────────────────────────────────────────────────────────── */

.mem-list {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.mem-empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--sp-8) 0;
  font-size: 14px;
}

/* ── Knowledge entry ───────────────────────────────────────────────── */

.k-entry {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration);
}
.k-entry:hover { border-color: var(--border-hover); }
.k-entry.orphaned { border-color: var(--red-dim); opacity: 0.7; }

.k-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
}

.k-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.badge-code  { background: rgba(107,163,190,0.15); color: var(--blue); }
.badge-notes { background: rgba(212,165,116,0.15); color: var(--amber); }
.badge-web   { background: rgba(94,170,168,0.15);  color: var(--accent); }
.badge-other { background: var(--border);           color: var(--text-muted); }

.k-summary {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-filename {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  flex-shrink: 0;
}

.k-orphan-tag {
  font-size: 10px;
  color: var(--red);
  background: rgba(199,91,91,0.12);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.k-chevron {
  color: var(--text-muted);
  transition: transform var(--duration);
  flex-shrink: 0;
}
.k-entry.expanded .k-chevron { transform: rotate(90deg); }

.k-body {
  display: none;
  border-top: 1px solid var(--border);
  padding: var(--sp-4);
}
.k-entry.expanded .k-body { display: block; }

.k-meta {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  flex-wrap: wrap;
}

.k-content-pre {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text);
  margin-bottom: var(--sp-3);
}

.k-footer {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.k-btn-edit {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
}
.k-btn-edit:hover { color: var(--text); border-color: var(--border-hover); }

.k-btn-delete {
  background: none;
  border: 1px solid var(--red-dim);
  color: var(--red);
  font-size: 12px;
  font-family: var(--font-body);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
}
.k-btn-delete:hover { background: rgba(199, 91, 91, 0.1); }

/* ── File Index entry ──────────────────────────────────────────────── */

.f-entry {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.f-entry.orphaned { border-color: var(--red-dim); opacity: 0.7; }

.f-type {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-sec);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 30px;
  text-align: center;
}

.f-path {
  flex: 1;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.f-orphan-tag {
  font-size: 10px;
  color: var(--red);
  background: rgba(199,91,91,0.12);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.f-btn-delete {
  background: none;
  border: 1px solid var(--red-dim);
  color: var(--red);
  font-size: 11px;
  font-family: var(--font-body);
  padding: 3px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration);
  flex-shrink: 0;
}
.f-btn-delete:hover { background: rgba(199, 91, 91, 0.1); }

/* ── Reflection entry ──────────────────────────────────────────────── */

.r-entry {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
}

.r-meta {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
  font-size: 11px;
  color: var(--text-muted);
}

.r-trigger {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-glow);
  color: var(--accent);
  letter-spacing: 0.05em;
}

.r-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Unindexed panel ───────────────────────────────────────────────── */

#unindexed-panel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--amber-dim);
  background: rgba(212, 165, 116, 0.04);
}
#unindexed-panel.hidden { display: none; }

.unindexed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-5);
  font-size: 12px;
  color: var(--amber);
  gap: var(--sp-3);
}

.unindexed-header > div { display: flex; gap: var(--sp-2); }

.btn-accent-sm {
  background: var(--amber-dim);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--duration);
}
.btn-accent-sm:hover { opacity: 0.85; }
.btn-accent-sm.hidden { display: none; }

.u-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.u-type {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.u-path {
  flex: 1;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.u-size {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.u-btn-ingest {
  background: none;
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  font-size: 11px;
  font-family: var(--font-body);
  padding: 3px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration);
}
.u-btn-ingest:hover { background: rgba(212, 165, 116, 0.12); }
.u-btn-ingest:disabled { opacity: 0.4; cursor: default; }
.u-btn-ingest.done { color: var(--green); border-color: var(--green); }

/* ── Editor overlay ────────────────────────────────────────────────── */

#editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
#editor-overlay.hidden { display: none; }

#editor-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  gap: var(--sp-3);
}

#editor-title {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-sec);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editor-controls { display: flex; gap: var(--sp-2); }

#editor-textarea {
  flex: 1;
  background: var(--bg-input);
  border: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: var(--sp-4);
  resize: none;
  outline: none;
  min-height: 400px;
  max-height: calc(90vh - 60px);
}

/* ── Toast ─────────────────────────────────────────────────────────── */

#toast {
  position: fixed;
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  color: var(--text);
  font-size: 13px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  z-index: 300;
  transition: opacity 300ms;
}
#toast.hidden { display: none; }
#toast.toast-ok  { border-color: var(--green); color: var(--green); }
#toast.toast-err { border-color: var(--red-dim); color: var(--red); }

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .k-filename { display: none; }
  .f-path { font-size: 11px; }
  .mem-list { padding: var(--sp-3); }
  #editor-panel { max-height: 100vh; border-radius: 0; }
  #editor-overlay { padding: 0; align-items: flex-end; }
}