/* ===== ATLAS AI — sidebar.css ===== */
#sidebar {
  width: 284px; min-width: 284px; height: 100%;
  background: var(--surface); border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 500; }
.brand b { color: var(--accent); font-weight: 700; }
.brand-logo { width: 26px; height: 26px; color: var(--accent); }
#sbClose { display: none; }

.new-chat-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 8px 12px 6px; padding: 10px; border-radius: 11px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14.5px;
  transition: filter 0.15s;
}
.new-chat-btn:hover { filter: brightness(1.08); }
.new-chat-btn svg { width: 17px; height: 17px; }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 12px 8px; padding: 0 10px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
}
.sb-search svg { width: 16px; height: 16px; color: var(--text-dim); }
.sb-search input {
  flex: 1; background: none; border: none; outline: none;
  padding: 9px 0; font-size: 13.5px; min-width: 0;
}
.sb-search input::placeholder { color: var(--text-dim); }

.sb-scroll { flex: 1; overflow-y: auto; padding: 2px 8px 8px; }
.sb-section { margin-bottom: 8px; }
.sb-section-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim); padding: 10px 8px 6px;
}
.sb-inline-btn {
  display: block; width: 100%; text-align: start; padding: 8px 10px;
  border-radius: 9px; color: var(--text-dim); font-size: 13px;
}
.sb-inline-btn:hover { background: var(--surface2); color: var(--text); }

.convo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  color: var(--text); font-size: 13.5px;
  user-select: none; -webkit-user-select: none;
}
.convo-item:hover { background: var(--surface2); }
.convo-item.active { background: var(--accent-soft); color: var(--accent); }
.convo-item .ci-title {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.convo-item .ci-pin { color: var(--accent); width: 13px; height: 13px; display: none; }
.convo-item.pinned .ci-pin { display: block; }
.ci-ellipsis {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sb-foot { border-top: 1px solid var(--border); padding: 6px; }
.sb-foot-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 9px; color: var(--text-dim); font-size: 13.5px;
}
.sb-foot-btn:hover, .sb-foot-btn:focus-visible { background: var(--surface2); color: var(--text); }
a.sb-foot-btn { text-decoration: none; }
.sb-foot-btn svg { width: 17px; height: 17px; }

#sbBackdrop { display: none; }

/* Context menu (long-press / right-click on a conversation) */
.ctx-menu {
  position: fixed; z-index: 90; min-width: 170px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 5px;
  animation: popIn 0.15s ease;
}
.ctx-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: start; padding: 9px 11px; border-radius: 8px; font-size: 13.5px;
}
.ctx-menu button:hover { background: var(--surface2); }
.ctx-menu button.danger { color: var(--danger); }
.ctx-menu button svg { width: 16px; height: 16px; color: var(--text-dim); }
.ctx-menu button.danger svg { color: var(--danger); }